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

Question

我正在为iPad制作一个布局，布局的宽度是950px，当我进入横向模式时，我没有得到任何水平滚动条（实际上我应该有，因为布局的宽度以像素为单位固定，950px而不是786px）全部都是很好，但顶部标题栏的高度正在缩小。

我做错了什么。我希望我的布局在横向模式下不应该缩小。每个元素应该具有与纵向模式相同的高度。

Answer 1

我怀疑 viewport 元点击可以调整您网站的大小。尝试将初始值固定为 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/库/存档/文档/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

Answer 2

我不知道您是否遇到这种情况，但 iOS 上存在一个错误，即在纵向和横向模式之间切换时比例会发生变化。请参阅 http://www.blog .highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug/

您可以按如下方式修复它：

将此元标记添加到 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, fix, true);
}

}(document));

Answer 3

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

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

Answer 4

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

这也可能有帮助