Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Viewport initial-scale issue for iPad

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #149833
    cpk33
    Participant

    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.

    #149839
    Paulie_D
    Member

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

    #149847
    cpk33
    Participant

    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.

    #149851
    cpk33
    Participant

    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.

    #149854
    Paulie_D
    Member

    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).

    #149855
    cpk33
    Participant

    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.

    #149882
    cpk33
    Participant

    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.

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.