jquery - 如何使用 jquery 获取 Ipad 和 Iphones 视口宽度

Question

如何使用 jquery 获得 Ipad 和 Iphone 视口的正确宽度。因为我的网页比 Ipad 的原始尺寸大，所以它会按比例缩小。我想要做的是将我的内容 div 设置为每个浏览器的宽度，然后将概览设置为隐藏。这适用于桌面浏览器。当我在 Ipad 或 Iphone 中进行测试时，由于 IOS 的缩放，情况就不同了。我想保持这种缩放，但能够检索正确的宽度。我已经尝试过 width 和 outerWidth() 但没有运气。

        $(window).resize(function() {
        $('#content').css({width: $(this).outerWidth()});
    });

Answer 1

为什么不在 CSS 中使用百分比？

例如，您可以通过以下方式完成您在示例中所做的相同事情：

#content { width: 100%; }

编辑：另外，如果你想在不同的设备上完成不同的事情，我建议你阅读 CSS 媒体查询和响应式设计。

例如，假设在您网站的全视图中，您希望内容占据 70% 的宽度，而侧边栏占据其余部分。但是，当有人通过智能手机查看您的网站时，您希望内容占据页面的整个宽度，并且侧边栏位于页面下方，同时也占据整个宽度。你可以这样做：

.main-content { width: 70%; float: left; }
.sidebar { width: 30%; float: left;}

@media screen and (max-width: 500px) {
   .main-content, .sidebar { width: 100%; }
}

Answer 2

你有没有试过这个：

$( window ).height();
$( window ).width();