Reputation: 745
I'm building my first responsive page and have problems with "Meta Viewport".
I'm using this:
<meta name="viewport" content="width=device-width,,minimum-scale=1.0,user-scalable=yes" />
On Desktop and iPhone, I see the result I wanted. But my iPad the result is . I just want to use meta name="viewport"
for smartphones. Is there a way to restrict this tag for just smartphones?
EDIT: I want just one breakpoint for smartphones. The problem is, when i add the "Meta Viewport" tag to head, than i have a problem. I want that this meta tag only appears, when max-width==480px.
EDIT 2 -> MY SOLUTION:
"screen.width" is returning the same value as window.innerWidth after adding "Meta Viewport: device-width". Its now working on desktop, ipad and iPhone5.
<script type="text/javascript">
if( screen.width < 480 ) {
document.write( '<meta name="viewport" content="width=device-width,minimum-scale=1,user-scalable=no" />' );
}
</script>
<link rel="stylesheet" media="screen and (min-device-width: 280px) and (max-device-width: 480px)" href="files/css/smartphones.css" />
Upvotes: 0
Views: 1262
Reputation: 8791
You can't get iOS (iPhone or iPad) to ignore the viewport tag. What you can do is browser-sniff for iPad and dynamically remove the viewport tag with javascript. OR, add the viewport tag only if the user-agent is a phone and not a tablet.
Something like this:
if (navigator.platform === 'iPad') {
var viewport = document.getElementsByName("viewport")[0]
viewport.parentNode.removeChild(viewport)
}
Upvotes: 1