How to apply viewport width conditionally based on device width?

2
votes

Currently I set the viewport width to device-width for my mobile users. On certain pages, I need to stretch the vieport width to fit content such as comics or external dialogs, so I apply a viewport width of, let's say, 480px.

Everything was great until I tested it on my Iconia B1 tablet (1024x600). The viewport width limited to 480 creates the problem of layout not covering 100% of the screen.

The million dollar question is: How to apply a 480px width only if the device width is lower than 480? And if larger than 480, apply device-width instead (to make layout cover 100% of the screen). Any ideas? Is it even possible?

2
cssmobileviewport

2 Answers

3
votes

A 10 bucks answer to your question.

You can use media query of CSS3 to get the screen width and then change the style. You can use it as

@media only screen and (max-width: 480px) {
  // properties for smaller screens
}

// other styles if screen is bigger

Good thing, you can have as many queries as you many you want. And then are all appened to the end of your CSS file (.css). You can use them to change the style dynamically without having to use JS. They are usable and easy to handle too. 

@media only screen and (max-width: 480px) {
   // properties
}

@media only screen and (max-width: 600px) {
   // properties
}

And you just need to edit the parts which need to be changed, other properties will be the same!

2
votes

You can use the following:

@media (max-width:480px) {
.myclass {
// your code here
}
}

.myclass {
// your code here
}

edit: In the above code you can set .myclass to width:480px inside the @media media-query and use width:100% for the other one.