gpt4 book ai didi

javascript - HTML 和 JS : how to open website with viewport on mobile devices (iOS) with small viewport by default?

转载 作者:技术小花猫 更新时间:2023-10-29 10:17:04 25 4
gpt4 key购买 nike

默认情况下,在我的应用程序中,我有两种分辨率(宽度):

1024px+ & 520px

我有这样的视口(viewport):

<meta name="viewport" content="width=520, initial-scale=0.5" id="vwPrt">
<script>
window.onload = function () {
if(screen.width > 521) {
var vpEl = document.getElementById('vwPrt');
vpEl.setAttribute('content','width=520, initial-scale=1');
}
if(screen.width > 970) {
var vpEl = document.getElementById('vwPrt');
vpEl.setAttribute('content','width=1024, initial-scale=1');
}
}
</script>

和CSS:

...

@media all and (min-width:0px) and (max-width:520px){...}
...

有时在 iOS 设备上,我首先看到大分辨率 (1024px+) 的 css 样式,只有在缩放或重新加载页面后,iPad 和 iPhone(在纵向模式下)我才能获得 520px。

我做错了什么?

在桌面模式下,如何即时检测宽度并直接应用它而不出现屏幕闪烁?

最佳答案

我会推荐一种更简单的方法。可以根据媒体查询链接到单独的 CSS 文件。

你需要做的是:

<link rel='stylesheet' media='all and (min-width: 0px) and (max-width: 520px)' href='css/small_devices.css' />
<link rel='stylesheet' media='all and (min-width: 520px) and (max-width: 970px)' href='css/medium_devices.css' />
<link rel='stylesheet' media='all and (min-width: 970px)' href='css/large_devices.css' />

在那种情况下,您还可以非常轻松地拆分内容,并且由于您将媒体查询分开,因此所有内容都变得更易读。

你必须把这些链接放在<head>里面你的文件。这样做还将确保在显示内容之前加载它。

关于javascript - HTML 和 JS : how to open website with viewport on mobile devices (iOS) with small viewport by default?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35475327/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com