想要一个宽度/高度为 100% 的 iPhone / iPad / iOS 网页

Posted 2023-03-14

【中文标题】想要一个宽度/高度为 100% 的 iPhone / iPad / iOS 网页

【英文标题】：Want an iPhone / iPad / iOS Webpage that is 100% width/height

【发布时间】：2011-11-04 01:35:10

【问题描述】：

在向下滚动到足以摆脱地址栏之后，我正在尝试获得一个仅为设备可能宽度/高度的 100% 的网站。希望这是有道理的？

我只需要简单的尺寸，这样我就可以将设备滚动到 0,0 并尽可能多地查看我的页面。例如只需 320x400（320 宽度，400 可能 = 高度 - 标题栏 - 页脚）

这样做的原因是我将单个 DIV 放在一个页面上，该页面是一个“视口”到四处移动的内容中，想想谷歌地图。我只想让这个 div 填满所有可用空间。

问题是我似乎无法检测到可用的窗口高度。我似乎总是得到屏幕大小 - 标题栏 - 地址栏 - 可选调试栏 - 页脚。如何检测“最大可能尺寸”？

【参考方案1】：

将html,body 与height:100%; 和div 放在position:absolute;top:0;bottom:0;left:0;right:0; 中，然后您不需要视口的确切宽度/高度，div 已经使用了最大可能的空间。

但如果你仍然想检测，jQuery 得到了 $(element_you_want).width() 和 .height() 也可以解决问题。尝试使用文档或仅正文（高度为 100%）

【讨论】：

@Sparky672 感谢您的编辑，我从我的 iPhone 上的 *** 移动版发布，格式的痛苦，虽然我刚刚登录编辑但似乎你已经做到了 =)

是的，我在 ios 中找不到 (`) 键。

其实不会——它会是窗口的高度——地址栏的高度。

【参考方案2】：

如果您使用的是 javascript，请尝试 alerting: 'innerWidth';

http://www.quirksmode.org/dom/w3c_cssom.html

【参考方案3】：

我自己回答这个问题：

var $div = $( '<div></div>' ).appendTo( document.body );

$div.css(height:2000,width:2000);

setTimeout(function()
    window.scrollTo(0,1);
    alert( window.innerHeight + ', ' + window.innerWidth );
, 10);

基本思想是我强制窗口大于我知道它可以支持的大小，删除地址栏然后测量大小。我现在可以适当地调整这个 div 的大小。

【讨论】：

你可以使用scrollTo(0,0) 我认为不会丢失1px