CODEWITHSUNDEEP
htmlcssmedia-queriesmeta-tags
AppGeer
AppGeer

Reputation: 745

HTML Meta Viewport only for smartphones

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

Answers (1)

MattDiamant
MattDiamant

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

Related Questions