ios – 为景观和肖像设置不同的初始尺度

ios – 为景观和肖像设置不同的初始尺度,第1张

概述我在Ipad上设置不同的风景和肖像初始尺寸 我加了头 < meta name =“viewport”content =“width = device-width,initial-scale = 0.6”/> 我试图使用这个脚本 if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) { 我在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,但请务必在移动设备上进行测试(有关详细信息,请参阅下文).

本质在于JavaScript代码,其中包括以下内容:

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的移动仿真器,它不起作用.我的解决方法是临时更改事件以调整大小.

总结

以上是内存溢出为你收集整理的ios – 为景观和肖像设置不同的初始尺度全部内容,希望文章能够帮你解决ios – 为景观和肖像设置不同的初始尺度所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/1111308.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-29
下一篇 2022-05-29

发表评论

登录后才能评论

评论列表(0条)

保存