iOS viewport settings_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-04 03:04 出处：网络

I\'m building an iPad specific web app. Currently, I\'m trying to set the page width & viewport settings to optimise the site.

相关专题：css ipad

I'm building an iPad specific web app. Currently, I'm trying to set the page width & viewport settings to optimise the site.

What I'm trying to achieve is to have the web app take up the full screen in both landscape and portrait modes without user scaling and without开发者_开发知识库 blank areas to the left and right of the content.

I can achieve this with:

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

and

max-width:1024px;
min-width:768px;

The problem then, is coding all of my css for the variable widths. I'd really prefer to have a single css width so that I can properly code the widths of the page elements.

So if I set the css to have a single width, I can't seem to get the viewport settings right! When I open the page in portrait with these settings:

<meta name="viewport" content="width=device-width,user-scalable=no" />

everything works fine. When I rotate the device to landscape, again it's all good. Coming back to portrait then is where I have the problems. The page is then too big for the viewport! I want it to fit the device width still!

It's seems like it should be really easy! Am I missing something? I actually don't have an iPad (holding out for v2), so im testing on iOS simulator which comes with xcode – there shouldn't be any difference though!

I've been using this.

Not sure if this helps any, but there is a way you can detect the rotation and perform actions. Maybe forcing the page to render again or check the scaling. However I've not come across this problem on the iPad so far, do you have a page we can see to test on a device?

<body onorientationchange = "updateView();">

<script>
    function updateView()
    {
        switch (window.orientation)
        {
            case 0: // Portrait
                break;
            case 90: ; // Landscape
                break;
            case -90: ; // Landscape counterclockwise
                break;
        }
    }
</script>