设置不同的初始规模为横向和纵向

我NEET设置不同的初始规模为横向和纵向iPad上设置不同的初始规模为横向和纵向

我head
<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无法正常工作。有什么方法可以使它工作？

来源

2014-05-19 truslivii.lev

这不是什么媒体查询的目的？ –

我试过了，但它们不适用于我的情况。 –

在switch语句中，你不需要在'default'后面添加'break' case – maioman

来自原始问题的JavaScript代码是相当现场，几乎是正确的。我在浏览器中测试时遇到的问题如下：window.orientation是undefined，因此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时，我已经替换了原始问题中的整个值，而不仅仅是initial-scale=0.6部分。

由于我只有Android设备进行测试，因此我还删除了关于iPhone和iPad检测的IF子句。因此，该解决方案也适用于桌面浏览器。但请记住，该桌面浏览器无法触发orientationchange事件。我尝试过Chrome的移动模拟器，但无法使用。我的解决方法是暂时将事件更改为resize。

来源

2015-06-24 15:44:59 alesc

你可以使用xcode模拟器来测试吗？ https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/iOS_Simulator_Guide/GettingStartedwithiOSSimulator.html只要你有一个Mac，它就是免费的...然后从模拟器，你应该能够触发orientationChange – Mikael

对不起，但我没有Mac和iPhone。我已经在Android手机上测试过它，它工作正常。您可以尝试在iPhone上打开[this plunkr]（http://run.plnkr.co/qz76xyrAkyl4hFiO/）并对其进行测试（这是来自答案的JS Bin的副本）。在肖像上，文字应该很小，在景观上它应该更大 - 因为“初始尺寸”是不同的（参见JavaScript代码）。 – alesc

看来我以前的plunkr链接不起作用。试试[this]（http://plnkr.co/edit/lBc2DJfiMdAqnccwn2rl）。在一个单独的窗口中启动预览，以使其全屏显示（并且没有编辑器）。 – alesc

你的原始答案确实是你所需要的（但是你错过了在你的代码片段中的关闭}，我认为这只是一个错字，而不是它不起作用的原因）！

使用宽度在另一个答复中提到，因为iOS设备上认为它的宽度是最短的尺寸，它的高度是它的最长尺寸无论取向不会检测纵向和横向。因此，您的开关语句对您的解决方案至关重要，并且正是您所需要的（请参阅here）。

我把你的代码，并在我的iPhone上运行它在这个jsFiddle（有一些调整，如添加缺少的左大括号），它工作正常。如果您在删除Useragent检测后（或者改为使用chrome模拟iPhone）检查小提琴中的HTML面板，则会看到它将meta内容更新为0，因为这是默认设置。

https://jsfiddle.net/80xj03cx/3/

这显然不会因为用户代理检测的浏览器中运行，并且有作为orientationChange没有这样的事件。如果你需要一个iOS设备来运行，你总是可以使用这样的服务：https://appetize.io/demo（你甚至可以在演示中输入那个小提示URL来查看它的工作情况）。

function doOnOrientationChange() { 
    var viewportmeta = document.querySelector('meta[name="viewport"]'); 
    switch(window.orientation) 
    { 
     case -90: 
     case 90: 
     alert('landscape'); // Just for debug obviously 
     viewportmeta.content = 'initial-scale=0.6'; 
     break; 
     default: 
     alert('portrait'); // Just for debug obviously 
     viewportmeta.content = 'initial-scale=0.8'; 
     break; 
    } 
} 

// Only bind the event on iPhone and iPad so we do not try and do this on any other device. 
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) { 
    window.addEventListener('orientationchange', doOnOrientationChange); 
    // Initial execution if needed 
    doOnOrientationChange(); 
}

来源

2015-06-30 15:18:42

设置不同的初始规模为横向和纵向

回答

相关问题