CODEWITHSUNDEEP
responsive-designviewport
Johnny
Johnny

Reputation: 576

Viewport Settings For Responsive Design

Okay,

So I am designing a site which needs to be responsive.

The design is nailed down and I have just been doing some testing.

In order to get my media queries for mobile devices to work, think phones not ipad in this instance, I have set up a media query and everything looks perfect.

In order to make use of these media queries, I use:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

However, this also has an impact on the ipad version, specifically the portrait version of my site which I do not need to touch.

I guess my question is how can I control which devices pick up the viewport settings?

Ideally I'd like to be able to do this on a 'less then this amount of pixels' basis but I'm open to all suggestions.

Thanks for all contributions in advance.

Upvotes: 1

Views: 495

Answers (3)

Pekka
Pekka

Reputation: 999

Remember to use comma separators on meta elements as they are considered key-value pairs:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

Upvotes: 1

Matoeil
Matoeil

Reputation: 7289

 <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

should work on every devices resolution. The zoom being deactivate though.

Use css media queries to adjust display for every width and height.

Upvotes: 0

lloan
lloan

Reputation: 1403

Try using maximum-scale = the maximum level the user is able to zoom in on a webpage, where a value of 1.0 means the user isn't able to at all. You can even make it to where the user cannot zoom - user-scalable= no

Upvotes: 0

Related Questions