blocks|key|1993569|text|查看苹果的文档，了解如何为Mobile+Safari设置视区，以及如何缩放：http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/UsingtheViewport/UsingtheViewport.html|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1993570|基本上，您可以为视区设置一个比例，并通过在HTML页面上设置一个meta标记将其设为您想要的任何值。|1993571|entityMap|0|LINK|mutability|MUTABLE|url|http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/UsingtheViewport/UsingtheViewport.html^0|12|3W|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

Check Apple's documentation on how to set the viewport for Mobile Safari, and how it scales: <a href="http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/UsingtheViewport/UsingtheViewport.html" rel="nofollow">http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/UsingtheViewport/UsingtheViewport.html</a>

Basically, you can set a scale for the viewport, and make it default to whatever you want by setting a meta tag on your HTML page.

blocks|key|1993588|text|添加|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1993589|<meta+name="viewport"+content="width=device-width;+initial-scale=1.0;+maximum-scale=1.0;+user-scalable=no">|code-block|syntax|javascript|1993590|添加到<head>元素。这将解决innerWidth问题。|offset|length|style|CODE|1993591|视网膜具有高密度像素-基本上是4个硬件像素对1个逻辑像素。这就是为什么他们报告了相同的解决方案。|1993592|entityMap^0|0|0|3|6|G|A|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]|$I|V|J|W|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|P|$]]

Add

<pre><code>&lt;meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no"&gt;
</code></pre>

to the <code>&lt;head&gt;</code> element. That will fix the <code>innerWidth</code> issue.

The retina has high density pixels - basically 4 hardware pixels to 1 logical pixel. That's why they report the same resolution.

blocks|key|1779898|text|还可以根据以下内容在viewport+meta标记中指定高度：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1779899|<meta+name="viewport"+content="width=device-width,+height=device-height,+initial-scale=1.0,+maximum-scale=1.0,+user-scalable=0"+/>|offset|length|style|CODE|1779900|我在我的iPad+2+(5.0.1)上使用窗口$(+jQuery+).height()时遇到了问题，因为我错过了在meta标记中指定高度。在添加之后，它的效果要好得多。|1779901|entityMap^0|0|0|3M|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|K|$]]

Also specify the height in the viewport meta tag according to this:

<code>&lt;meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /&gt;</code>

I had problems with using jQuery $(window).height() on my iPad 2 (5.0.1) since I had missed out specifying the height in the meta tag. After adding it works much better.

blocks|key|1779914|text|尝试使用screen.width而不是window.innerWidth。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1779915|<script>
++if+(screen.width+>+650)+{
++++....
++}
</script>|code-block|syntax|javascript|1779916|entityMap^0|4|C|J|H|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

Try to use <code>screen.width</code> instead of <code>window.innerWidth</code>.

<pre><code>&lt;script&gt;
 if (screen.width &gt; 650) {
 ....
 }
&lt;/script&gt;
</code></pre>

blocks|key|1993810|text|也被同样的问题卡住了。以下是对我有效的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1993811|首先，我要检测客户端是否是iOS设备。然后我使用Screen+interface获得了正确的值|offset|length|1993812|var+iOS+=+/iPad%7CiPhone%7CiPod/.test(navigator.userAgent)+&&+!window.MSStream;+
var+iw+=+(iOS)+?+screen.width+:+window.innerWidth,+ih+=+(iOS)+?+screen.height+:+window.innerHeight;|code-block|syntax|javascript|1993813|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Screen^0|0|O|G|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@$D|U|E|V|1|W]]|A|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

Was stuck on the same issue. 
Here's the solution that worked for me.

First I'm detecting if the client is an iOS device. 
Then i'm getting correct values using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Screen" rel="noreferrer">Screen interface</a>

<pre><code>var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) &amp;&amp; !window.MSStream; 
var iw = (iOS) ? screen.width : window.innerWidth, ih = (iOS) ? screen.height : window.innerHeight;
</code></pre>

blocks|key|1780311|text|iOS最新版本不支持window.innerHeight和window.innerWidth，因为iOS会读取分辨率。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1780312|因此，您可以使用以下命令：|1780313|screen.width
screen.height|code-block|syntax|javascript|1780314|我已经在appetize.io模拟器iPhone中尝试过了。|1780315|entityMap^0|0|3|A|I|T|H|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|Z|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|P|$]]

<code>iOS</code> latest version does not support <code>window.innerHeight</code> and <code>window.innerWidth</code>, because iOS will read the resolution.

So, you can use this :

<pre><code>screen.width
screen.height
</code></pre>

I have try it in appetize.io emulator iPhone.

blocks|key|1994081|text|同样的问题。我有一个全屏应用程序，不需要用户缩放任何东西(它是一个信息亭)，我的解决方案是添加shrink-to-fit=no元。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1994082|我当前视口的meta是：|1994083|<meta+name="viewport"+content="width=device-width,+height=device-height,+initial-scale=1.0,+maximum-scale=1.0,+user-scalable=0,+shrink-to-fit=no"+/>|1994084|现在，window.innerWidth、jQuery(window).width()和其他所有相关组件都可以正常工作。在此之前，我必须旋转iPad并将其返回到原始位置，以便窗口大小值刷新为合适的值。|1994085|entityMap^0|1B|G|0|0|0|44|0|3|H|L|M|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Q|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|L|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|M|$]]

Same issue still. I have a full screen app, no need for user to scale anything (it's a kiosk), and solution for me was adding the <code>shrink-to-fit=no</code> meta.
My current meta for the viewport is:
<code>&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no&quot; /&gt;</code>
Now <code>window.innerWidth</code>, <code>jQuery(window).width()</code> and everything else related works properly.
Before that, I had to rotate iPad and return it back to original position for window size values to refresh to the proper ones.

I'm using window.innerHeight and window.innerWidth instructions to get the browser's available window size. It's working with firefox, safari (on a mac) and android but I get strange results in iOS.

iOS always returns innerHeight=1091 and innerWidth=980.

I'm using iOS emulator from the iOS SDK (I don't own an iPhone/iPod). The same value is returned with the iPhone and iPhone Retina emulator. I don't understand how they can both returns the same numbers because the 2 models have 2 different screens resolutions.

I played with the viewport parameter with no success.

iOS return bad value for window.innerHeight/Width

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

我使用window.innerHeight和window.innerWidth指令来获取浏览器的可用窗口大小。它可以在火狐，safari (在mac上)和android上运行，但我在iOS上得到了奇怪的结果。iOS始终返回innerHeight=1091和innerWidth=980。我使用的是iPhone的iOS模拟...

问iOS返回的window.innerHeight/Width值不正确
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问iOS返回的window.innerHeight/Width值不正确EN