我在Ipad上设置不同的风景和肖像初始尺寸
我加了头
< Meta name =“viewport”content =“width = device-width,initial-scale = 0.6”/>
我试图使用这个脚本
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
function onOrientationChange()
{
var viewportMeta = document.querySelector('Meta[name="viewport"]');
switch(window.orientation)
{
case -90:
case 90:
viewportMeta.content = 'initial-scale=0.6';
break;
default:
viewportMeta.content = 'initial-scale=0.8';
break;
}
}
window.addEventListener('orientationchange',onOrientationChange);
onOrientationChange();
但是id不正确.有什么办法让它工作吗？
解决方法
原始问题的JavaScript代码相当现场,几乎是正确的.在浏览器中测试的问题如下：window.orientation未定义,因此switch子句是多余的.
我的固定解决方案的演示可以在这里找到：JS Bin,但请务必在移动设备上进行测试(有关详细信息,请参阅下文).
function onOrientationChange() {
var landscape = screen.width > screen.height;
var viewportMeta = document.querySelector('Meta[name="viewport"]');
if(landscape) {
viewportMeta.content = "width=device-width,initial-scale=1.0";
} else {
viewportMeta.content = "width=device-width,initial-scale=0.5";
}
}
window.addEventListener('orientationchange',onOrientationChange);
onOrientationChange();
可以看到我没有使用window.orientation,因为它在浏览器中测试时会导致问题,所以我只是检查屏幕的宽度和高度的比例：var landscape = screen.width> screen.height.另外,在设置viewportMeta.content时,我已经替换了原始问题中的整个值,而不仅仅是初始刻度= 0.6部分.
由于我只有Android设备要测试,我也删除了关于iPhone和iPad检测的IF条款.因此,该解决方案也适用于桌面浏览器.但请记住,桌面浏览器无法触发orientationchange事件.我试过Chrome的移动仿真器,它不起作用.我的解决方法是临时更改事件以调整大小.
