CODEWITHSUNDEEP
iphoneipadviewportmedia-queries
user1254824
user1254824

Reputation: 131

How to set viewport for specific devices only?

I need to set <meta name="viewport" content="width=650" /> for all devices smaller than 480px (iPhones etc.). The most simple solution that came to my mind would be <meta name="viewport" content="width=650" media="only screen and (max-device-width: 480px)" /> but unfortunately the media-attribute is not allowed in meta-tags.

The problem is that I don't want any viewport-declaration on iPads or at least with another "width".

Are there any simple solutions before I'm going to implement WURFL and exclude the viewport-declaration with PHP?

Upvotes: 2

Views: 2893

Answers (2)

user1254824
user1254824

Reputation: 131

So I came up with this solution (with the help of Modernizr):

<meta name="viewport" id="viewport" />
<script src="modernizr.js"></script>
<script>
if(Modernizr.mq("only screen and (max-device-width: 480px)")) 
   document.getElementById("viewport").setAttribute("content","width=650");
</script>

Upvotes: 4

chewy
chewy

Reputation: 8267

Here is a nice clean Native solution.

(I assume it will be easy to port this data to your webView)

if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad)
{
     // The device is an iPad running iPhone 3.2 or later.
     float viewportWidth = 768.0;

}
else
{
     // The device is an iPhone or iPod touch.
     float viewportWidth = 320.0;
}

Upvotes: 0

Related Questions