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.

Wouldn't setting `min-width:480px` in CSS using `@media` queries work? — VKen, Mar 25 '13 at 07:05
Yea. A lil bit, i guess i'll have write a new css to the whole page! change font stuff and everything? — user1617207, Mar 25 '13 at 07:07
As a long time designer, i have had to take multiple websites from old clients and turned there non responsive code to responsive, its not easy task. But worth it in the end. — NodeDad, Mar 25 '13 at 07:24
Possible duplicate of [Achieving min-width with viewport meta tag](http://stackoverflow.com/questions/15040408/achieving-min-width-with-viewport-meta-tag) — Brendan Long, Dec 06 '16 at 20:56

score 4 · Answer 1 · answered Dec 06 '16 at 20:47

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.

Prashobh · Answer 2 · 2013-03-25T07:14:31.263

1

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
}

Media queries
view port

edited Mar 25 '13 at 07:14

answered Mar 25 '13 at 07:09

Prashobh

9,216
15
61
91

NodeDad · Answer 3 · 2013-03-25T07:10:33.523

0

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/

edited Mar 25 '13 at 07:10

answered Mar 25 '13 at 07:05

NodeDad

1,519
2
19
48

That's the only way to do it? Can't i fix the width [min-width]?? – user1617207 Mar 25 '13 at 07:10
You'll need to show me your code to fix what your trying to do. I cant help you any further. – NodeDad Mar 25 '13 at 07:19

score -1 · Answer 4 · answered Mar 25 '13 at 07:10

-1

@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!

answered Mar 25 '13 at 07:10

Jace

3,052
2
22
33

1

Studies show its actually easier to design smallest to largest, prevents less bugs to fix later on down the road. But is for more avance users and logical thinkers. Got to be able to think ahead. So designing desktop first isn't actually better, just easier for beginners. – NodeDad Mar 25 '13 at 07:21

Set min-width in viewport metatag

4 Answers4

Linked