HTML CSS布局在iPad横向模式下正在缩小？

问题描述

| 我正在为iPad进行布局，布局的宽度为950像素，当我进入横向模式时，我没有任何水平滚动条（实际上我应该有它，因为布局的宽度以950像素为单位固定在像素中不是786像素），一切都很好，但顶部标题栏的高度正在缩小。 我做错了。我希望我的布局在横向模式下不应该缩小。每个元素都应具有与肖像模式一样的高度。     

解决方法

我怀疑ѭ0元水龙头可以调整您的网站大小。尝试将比例尺初始值固定为1，将最大值固定为最小值。

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

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html     ,我不知道这是不是正在发生的事情，但是iOS上存在一个错误，即在纵向和横向模式之间切换时，比例会发生变化。参见http://www.blog.highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug/ 您可以按以下方式修复它： 将此meta标签添加到HTML文档的头部：

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

并将此JavaScript添加到页面-请参阅https://gist.github.com/90129

(function(doc) {

var addEvent = \'addEventListener\',type = \'gesturestart\',qsa = \'querySelectorAll\',scales = [1,1],meta = qsa in doc ? doc[qsa](\'meta[name=viewport]\') : [];

function fix() {
    meta.content = \'width=device-width,minimum-scale=\' + scales[0] + \',maximum-scale=\' + scales[1];
    doc.removeEventListener(type,fix,true);
}

if ((meta = meta[meta.length - 1]) && addEvent in doc) {
    fix();
    scales = [.25,1.6];
    doc[addEvent](type,true);
}

}(document));

    ,在webkit设备（Android / iOS）上，可以在主体上使用此CSS来防止方向更改（旋转）后调整文本大小。我花了一段时间才找到它。希望它可以帮助其他人使用此奇怪功能。

<style>
body {
     -webkit-text-size-adjust: none;
}
</style>

    ,

<link rel=\"stylesheet\" media=\"handheld\" href=\"css/handheld.css?v=2\">

这也可能有帮助