html5 视口,html5 – 在媒体查询中更改视口

接受的答案是正确的,但如果您正在使用jQuery并且jQuery需要准备好.在慢速连接上,您会遇到该代码的问题,因此您可能会收到“$”未定义的错误.

这就是我在这种情况下更喜欢纯JavaScript的原因：

(function setViewPort() {

if (screen.width < 640 && (window.orientation == 0 || window.orientation == 180)) {

document.getElementById("viewport").setAttribute("content","width=480,initial-scale=0.68");

//alert('480 @ 0.68,landscape');

} else if (screen.width < 640) {

// document.getElementById("viewport").setAttribute("content","width=device-width,initial-scale=1");

// disabled,since its the same as the default. if this one is different,uncomment line above

//alert('device-width @ 1,landscape');

} else if (screen.width >= 640) {

document.getElementById("viewport").setAttribute("content","width=640; initial-scale=0.5");

//alert('640,high res phones');

}

})();

在我的情况下,我设置480px与0.68变焦为肖像,320px与1变焦为横向,所以人们可以看到更大的文本和(因为这是一个只有移动的页面)如果screen.width高于640(就像我的机器人5“手机屏幕尺寸为1900×1080)至640px,0.5变焦(因为宽度始终保持在320px).

此致,Max