iPad方向问题的元标记

Posted 2023-03-12

【中文标题】iPad方向问题的元标记

【英文标题】：meta tag for iPad orientation issue

【发布时间】：2012-03-06 18:45:07

【问题描述】：

最初我使用元标记：

<meta name="viewport" content="width=device-width, 
initial-scale=1.0/>

使用此标签时，在初始加载时，页面在横向模式下看起来不错，但是当我将方向更改为纵向并返回横向模式时，页面缩小了。

然后我在我的页面上尝试了以下元标记：

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

虽然页面适合横向模式，但在纵向模式下我看不到滚动条来查看更多内容。

我是否需要使用媒体查询来使页面同时适合横向和纵向模式，或者是否有元标记可以帮助实现这一点？

【参考方案1】：

我找到了一个很好的解决方案：

元标记：

<meta name="viewport" id="viewport" content="width=device-width,minimum-  scale=1.0,maximum-scale=10.0,initial-scale=1.0" />

带有 jQ​​uery 的 javascript：

var mobile_timer = false;
if(navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) 
$('#viewport').attr('content','width=device-width,minimum-scale=1.0,maximum-     scale=1.0,initial-scale=1.0');
$(window).bind('gesturestart',function () 
    clearTimeout(mobile_timer);
    $('#viewport').attr('content','width=device-width,minimum-scale=1.0,maximum-scale=10.0');
).bind('touchend',function () 
    clearTimeout(mobile_timer);
    mobile_timer = setTimeout(function () 
        $('#viewport').attr('content','width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0');
    ,1000);
);

除非检测到手势，否则该脚本基本上不允许在 iPhone 上缩放，只需在您的 html 中引用它就可以了；） 来源：http://www.ternstyle.us/blog/reset-iphone-zoom-on-orientation-change-to-landscape

我还为 iPhone 设置了这个媒体查询

@media screen and (max-device-width: 480px)

    html
    
        -webkit-text-size-adjust: none;
    

【讨论】：

该链接是一篇很棒的文章！谢谢！