我在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的移动仿真器,它不起作用.我的解决方法是临时更改事件以调整大小.
原文地址:https://www.jb51.cc/iOS/336340.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。