Question

我的问题是针对iOS设计的网页。在iPhone 5（Safari）上进行测试时，它在纵向模式下可以正常加载，然后可以精细切换到横向模式。但是当回到Portrait from Landscape时它会放大。我认为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>

Answer 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>

iOS Safari从横向缩放到纵向网页

1 个答案: