[Solved] Viewport initial-scale issue for iPad

[cpk33]

Hey all,

When I have my initial-viewport set to .75, portrait orientation on the iPad looks great, but not landscape. When I have initial-viewport set to 1, landscape looks great.

<meta name="viewport" content="initial-scale=.7, width=device-width, user-scalable=yes" />

I want to switch the initial-scale by using zoom to be 1. My media query code doesn’t seem to work. Not sure what I’m doing wrong.

@media screen (min-device-width : 768px) and (min-device-height: 1024px) and (orientation:landscape) {

@viewport { 
    zoom: 1;

  }

}

Thanks. This site is the sh#t.

[Paulie_D]

I don’t think you can change a meta tag with a media query.

[cpk33]

I thought that zoom in a media query would essentially be changing the initial scale. Maybe not. Im writing some javascript to do this for me.

[cpk33]

I am trying this, but I have a feeling something isn’t right here…

jQuery(document).ready(function() {

    if (jQuery(window).width() > jQuery(window).height())  {
        var viewportmeta = jQuery("meta");
        if (viewportmeta) {
            viewportmeta.replaceWith('<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes"  />');
        }
    }

    }); 

Thanks for your quick reply Paulie D… Any help would be great.

[Paulie_D]

Offhand I would say that this is the primary issue

initial-viewport set to .75,

Something about this seems wrong. I think it’s a magic number you’ve used to overcome a specific issue without resolving the actual underlying problem.

It’s either a design issue or, more likely, a media query issue (or both).

[cpk33]

PAULIE D!!!!!!!! Thank you so much. I commented out the meta tag and it works fine now in both portrait and landscape views. I was making it way to complicated apparently..

Really appreciate your help.

[cpk33]

Hey,

This actually isn’t solved…. yet. When I comment out the meta viewport tag, my site displays really well on the iPad and Android tablets.

When I do this though, the media.css file for iPhone no longer works. I need to find a way for the media.css to tell the device to use its own width..

I tried

@viewport {
    width: device-width;
}

Thanks everyone.

[Author]

Posts