Search code examples
cssmobile-safariviewport

Do apple devices ignore CSS @viewport definitions?

I am trying to find a way to set a different viewport initial scale for different devices. As far as i can tell, there is no way to do this using the meta viewport tag - i haven't found a way to use it in conjunction with a media query.

I was hoping that CSS @viewport could offer a solution, but i have been trying it to no avail. I used the following code inside the head of my HTML:

<style>
@viewport {zoom:.44;}                              
</style>

But found that it had no effect on either iphone or ipad. Both devices rendered the pages the same way they would if no viewport definition was in place. Do apple devices ignore the @viewport definition? I had similar results with width declarations. Is there any other way to make device-sensitive initial scale definitions?

Solution

  • To get it to work in Safari, you'll need to specify in the meta tag 

    <meta name="viewport" content="width=device-width" />