Using javascript I create a meta viewport and assign to it a value of 980px. The script is this:
var viewPortTag=document.createElement('meta');
viewPortTag.id="viewport";
viewPortTag.name = "viewport";
viewPortTag.content = "width=980, user-scalable=1";
document.getElementsByTagName('head')[0].appendChild(viewPortTag);
In CSS, is it possible to write a media query that fires only when the viewport width is EXACTLY 980px?
Yes, in CSS it is possible to use #media rules to target an exact width.
CSS Example
#media (width: 980px) {
/* Your CSS */
}
This is telling the browser, when the viewport width is exactly 980px wide, apply the following CSS. When your viewport width changes to 981px or 979px or anything that isn't 980px wide, the CSS will be removed.
Unlike the other answers, this is not using max-width or min-width because the #media rules allow you to just define width, which will target the exact measurement you give it. The width is defined using the viewport width.
Note: You can learn more about the CSS3 #media rule from W3 Schools. Specifically if you look under Media Features, you'll see the available variables, including width all the way at the bottom.
You could do something like this. The media query will be triggered at 980px width and would work for width no greater than 980px.
#media screen and (min-width: 980px) and (max-width: 980px) {
html {background-color: red !important;}
}
html {background-color: green; min-height: 300px;}
You can use the exact width like this:
#media screen and (width: 980px) {
/* CSS rules here */
}
using both width and height exactly for ipad pro width:1024px, height:1366px
#media only screen and (min-width: 1024px) and (max-width: 1025px) and (min-height: 1366px) and (max-height: 1367px)
#media screen and (min-width: 980px) {
body {
background-color: lightblue;
}
}
Related
I am building a web page which contains svg graphics. I want to make it responsive.
If the page is loaded on a physically small device, i.e. a smart phone, the graphics is too small to be viewed well, so I have to change it in case of a smart phone client.
The exact device or even the exact screen resolution is not important. Important is that I can answer the question "Is the client a small device?".
How can I do that?
Assuming that this is a common question, there should be a best practise for this or a common library. Can you help me?
I'd suggest doing it like this, putting this tag on the head of your index.html:
<meta name="viewport" content="width=device-width, initial-scale=1">
This will allow you to work with media queries, where you can choose different css style properties depending on the size of the screen. Some examples:
#media all and (min-width:1200px){ ... }
#media all and (min-width: 960px) and (max-width: 1199px) { ... }
#media all and (min-width: 768px) and (max-width: 959px) { ... }
#media all and (min-width: 480px) and (max-width: 767px){ ... }
#media all and (max-width: 599px) { ... }
#media all and (max-width: 479px) { ... }
There are many other ways to set up the media queries, there is definitely one that is perfect for what you're trying to do.
W3 media query example
Using media queries by Mozilla
Finally, I'd suggest setting the height, max-height and width and max-width styles with the vh and vw units, such as:
height: 50vh;
width: 50vw;
VH and VW stands for viewport height and viewport width. This will make it so an image's size, for example, is exactly half the size of a device screen.
Here, the web page is displayed in a 1349x659 browser window. (it's exactly the dimensions of the image). With the body width set to 60%, the content is nicely packed and easily read.
Here I have resized the browser window to 478x642. And you can see that the 60% body width no longer gives the good view.
Since the web page can be resized without the server even knowing, the solution must be in the client side. Or done in the css file.
I suggest this algorithm:
If the visitor is mobile, then the body width should be 100% regardless of any other thing.
If the visitor is not mobile (tablet, pc, ...) then (
If the width of the browser window is larger than the height, body width will be equal to the window height.
but if the width is less than the height, then the body width is 100%.
)
Here is a fiddle
https://jsfiddle.net/rawj7vxc/
<body>
Some posts are not public. To access them, please login to your account, or register if you have none yet. By logging in to your account, you're no longer considered a "guest", this has some benefits which come with account promotions. Seeing more posts is one of those benefits. Registered accounts need verification. You'll be told how to this after the first unverified login. The verification will, however, not be immediate.
</body>
body {
background-color: rgb(31,25,0);
width: 60%;
padding: 0;
margin: 0 auto;
font-family: consalos;
text-align: justify;
color: rgb(215,200,0);
overflow: auto;
}
You need to look into using media queries. These will allow you to cater your design to the width and height of your screen.
/* Large Devices, Wide Screens */
#media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
#media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
#media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
#media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px) {
}
Media Queries
You could use some framework like Bootstrap or media queries:
#media (min-width: 568px) {
.myDiv{
width: 550px;
}
}
#media (min-width: 992px) {
.myDiv{
width: 970px;
}
}
#media (min-width: 1200px) {
.myDiv{
width: 1170px;
}
}
Here you have more information: w3schools.com
And also about Bootstrap: getbootstrap.com
I think you could use the metatag viewport (see documentation here)
viewport element gives the browser instructions on how to
control the page's dimensions and scaling.
The width=device-width part sets the width of the page to follow the
screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page
is first loaded by the browser.
In your head section, simply add following tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
If you want to add width: 60% only when the screen is "wide" you could use:
#media screen and (orientation:landscape) {
body {
width: 60%;
}
}
See here
I hope it helps you, bye.
Ok, here is my solution with pure javascript,
document.getElementByTagName("body").onresize=function(){
var fullwidth=screen.width;
var fullheight=screen.height;
if(fullwidth<aval){ //checking if mobile
/*
* make width 100%
*/
}
else
{
if(fullwidth>fullheight)
//make width = fullheight
else
// make width=100%
}
}
I have given you the logic structure only, if you want full css change(width and height change) code, mention here.
N.B. aval is the threshold value under which screen size device will be treated as mobile device
I'am creating new web site. My intention is creating one page for desktop and mobile and set styles depend of device (mobile or desktop). I know I can achieve everything with pure javascript, but I would like to use also CSS and media queries. My question is: how can I set style only for mobile devices using CSS media queries? I was trying to use:
#media only screen{
style...
}
But it works for both, mobile and dekstop browsers.
You can not simply target mobile but have to give break point in order for it to work. You will have to use min-width or max-width for that to work
/* Smartphones (portrait and landscape) ----------- */
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen and (max-width : 320px) {
/* Styles */
}
Example: This will hide div with class of sidebar and set container width to 100% on smaller screens
#media only screen and (max-width : 321px) {
.sidebar {
display:none;
}
.container{
width:100%;
}
}
Have you tried setting your styles based on screen-size rather than device?
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
If the styling, and even content, is entirely different from mobile to desktop, using a framework like Bootstrap makes this really easy. You can follow their strategy by creating hidden-xs and visible-xs classes with your own media queries, and apply those classes to different divs. Not the DRYest way of doing it, but gets the job done.
#media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
.hidden-xs {
display: none;
}
.visible-xs {
display: block;
}
}
I know how to choose one of alternate css according to browser width with css media property but.. what if I have to choose few of many alternate CSS...?
Suppose I have three themes on my webpage viz Red Green and Blue. Each of them have two variants _big and _small for browser width greater than 1024px and lower than 1024px respectively. So I have
Red_big.css
Red_small.css
Green_big.css
Green_small.css
Blue_big.css
Blue_small.css
Now I have three buttons to switch them. BtnR, BtnG, BtnB.
When I click BtnR, it switches the style according to browser-width ie if browser width is grewater than 1024px, then CSS selected is Red_big.css else Red_small.css...
and.. so on when I click BtnG or BtnB...
How to do that with javascript? Thanks.
make it one big CSS file, and use responsive inside:
<style type="text/css">
#media only screen and (min-width: 1024px) {
/* your css of 1024 px screen size */
.green {font-size:40px}
}
#media only screen and (min-width: 640px) {
/* your css of 640 px screen size */
.green {font-size:20px}
}
</style>
Ok try responsive css for example
min-width: 100%
this way the width will adjust with what ever the screen size maybe
hope this helps.
I want to make my button controls resizable according to the screen sizes, like they should adjust themselves on other mobile devices as well(iPhones and iPads) .How is it possible?
Css3 has mediaqueries which allows you make screen specific styles. This is not very well supported in older IE's, that is why you always have to define an normal.
The cascading effect stays in affect, you do not need to redefine properties from normal in the mediaqueries (for example, background will be green in all scenarios)
/*normal*/
button{
width: 200px;
background: green;
}
#media only screen and (max-width: 600px) {
button{
width: 150px;
}
}
#media only screen and (max-width: 480px) {
button{
width: 100px;
}
}
This is called responsive design, the design responds to the widths. IE will do nothing, but if you are using Firefox and make the width of the browser smaller, it will hop automatically to the media styles
Well you gotta use media queries for that :
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Use percentage based sizes on your elements so that they scale automatically, or use media queries for specific window sizes, and set your element sizes accordingly.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
You can make them resizable by setting their width in percentage, so that they would resize according to the screen size,
.buttonclass
{
width:80%;
}
This should work..
if you want to use pixels, then make use of media queries according to various screens you need to support,
#media screen and (max-width: 480px) and (min-width: 320px) {
.buttonclass{
width:300px;
}
}