Set min-width in viewport metatag
Question
I'm designing a web page [responsive]. Min-width of the screen should be 480px. how do i do it?
Right now i'm fixing the width to 480px which looks perfect on the phones but looks pretty huge on the tablets. For big screens the width should change dynamically.
4 answers
solution1
1 2013-03-25 07:09:24
min-width in view port meta tag
<meta name="viewport" content="width=480">
or
@-o-viewport {
width: 480px;
}
for responsive design
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Using media queries
@media screen and (max-width: 480px) {
css
}
solution2
1 2016-12-06 20:47:44
I wrote a polyfill to add min-width to the viewport meta tag:
https://github.com/brendanlong/viewport-min-width-polyfill
If you use it, can you just do:
<meta name="viewport" content="width=device-width, initial-scale=1.0, min-width=480"/>
<script type="text/javascript" src="viewport-min-width.js"></script>
It works by replacing the viewport with a static width if screen.width < minWidth . I've tested in mobile Firefox and Chrome, and it should work in Safari from what I've heard.
solution3
0 2013-03-25 07:05:31
Put all of your desktop CSS as you normally would, i imagine, just as you are now. then use media queries to call upon your new css elements.
@media screen and (max-width: 480px) {
//all of your mobile styling
}
also add media="screen" to where your calling your stylesheet in your <head> rel="stylesheet"
also heres a great tutorial http://css-tricks.com/css-media-queries/
solution4
-1 2013-03-25 07:10:18
@media queries are definitely what you need. They allow you to execute different CSS depending on the size of the viewport viewing your site.
This site here has a great @media query template to work off:
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
But generally, start by styling your desktop version first. Then make any modifications under the appropriate @media queries defined in the link above. It's a good place to start I think!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.