bra*_*r19 14 html javascript css jquery ios
默认在我的应用程序中我有两个分辨率(宽度):
1024px+ & 520px
我有这样的视口:
<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设备上,我首先看到css样式的大分辨率(1024px +),并且只有在缩放或重新加载页面之后,才能获得适用于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>文档中.这样做还可以确保在显示内容之前加载它.
来自 MDN：
load 事件在文档加载过程结束时触发。至此，文档中的所有对象都已在 DOM 中，并且所有图像、脚本、链接和子框架都已完成加载。
要使脚本在所有内容加载之前启动，您应该能够执行此操作，而无需window.onload()：
if (screen.width > 521) {
document.getElementById("viewport").setAttribute("content", "width=520; initial-scale=0.5");
}
if (screen.width > 970) {
document.getElementById("viewport").setAttribute("content", "width=1024; initial-scale=0.5");
}
| 归档时间： |
|
| 查看次数： |
536 次 |
| 最近记录： |