iOS Safari 将网页从横向放大到纵向答案

【问题标题】：iOS Safari zooms into webpage from landscape to portraitiOS Safari 将网页从横向放大到纵向
【发布时间】：2013-11-24 22:18:00
【问题描述】：

我的问题出在我为 iOS 设计的网页上。在 iPhone 5 (Safari) 上进行测试时，它可以在纵向模式下正常加载，然后可以正常翻转到横向模式。但是当从横向返回纵向时，它会放大。我认为 iOS Chrome 没有这个问题。

我尝试了很多不同的元标记，例如：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" >

但它们似乎只涵盖了从纵向到横向缩放的相反问题。

我们将不胜感激。我花了很多时间搜索但没有成功。

如果您想在移动设备上试用，请点击以下链接：http://www.blueberry-studio.co.uk/Robomoco_Websites/Device_iPhone_5/

这是使用的代码：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge" />
<meta name="viewport" content="user-scalable=no, width=1280" />
<meta name="apple-mobile-web-app-capable" content="yes"/>

<style type="text/css">
  @media screen and (orientation:portrait)
  {
    #robomocomobileportrait_hype_container {
      display: block;
    }

    #robomocomobilelandscape_hype_container{
      display: none;
    }
  }

  @media screen and (orientation:landscape)
  {
    #robomocomobileportrait_hype_container {
      display: none;
    }

    #robomocomobilelandscape_hype_container {
      display: block;
    }
  }
</style>




<div id="robomocomobileportrait_hype_container" style="position:relative;overflow:hidden;width:1280px;height:2260px;">
    <script type="text/javascript" charset="utf-8" src="Robomoco_mobile_portrait.hyperesources/robomocomobileportrait_hype_generated_script.js?71837"></script>
</div>

<div id="robomocomobilelandscape_hype_container" style="position:relative;overflow:hidden;width:1280px;height:720px;">
    <script type="text/javascript" charset="utf-8" src="Robomoco_mobile_landscape.hyperesources/robomocomobilelandscape_hype_generated_script.js?17049"></script>
</div>

【问题讨论】：

标签： ios zooming scale landscape portrait

【解决方案1】：

我找到了解决问题的方法：

var alsoenlarge = true;
$(function(){
  if(isScalePossible()){
    $('body').css({overflow:'hidden'}); //geen scrollbars
    $('#scalecontainer').css({position: 'absolute', margin: 0}); //centreren met de hand na resize

// Run scale function on start
    scaleSite();
    scaleSite();  

    // run scale function on browser resize
    $(window).resize(scaleSite);
  }
});
function scaleSite()
{
  windoww = $(window).width();
  sitew = $('#scalecontainer').width();
  f = windoww/sitew;

  if(!alsoenlarge && f>1) f = 1;
  $('#scalecontainer').css({
    "-moz-transform"    : "scale("+f+")",
    "-webkit-transform" : "scale("+f+")",
    "-ms-transform"     : "scale("+f+")",
    "-o-transform"      : "scale("+f+")",
    "transform"         : "scale("+f+")",
    "left"              : ((windoww-(sitew*f))/2)+"px"    
  });
}
function isScalePossible()
{
  can = 'MozTransform' in document.body.style;
  if(!can) can = 'webkitTransform' in document.body.style;
  if(!can) can = 'msTransform' in document.body.style;
  if(!can) can = 'OTransform' in document.body.style;
  if(!can) can = 'transform' in document.body.style;
  if(!can) can = 'Transform' in document.body.style;
  return can;
}

还有我在这个 div 中的内容：

<div id="scalecontainer"> </div>

【讨论】：