1

My problem is for my webpage designed for iOS. When testing on iPhone 5 (Safari) it loads fine in portrait mode then flips fine to landscape mode. But when going back to Portrait from Landscape it zooms in. I don't have this issue with iOS Chrome thought.

I've tried lots of different meta tags like :

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

But they seem to only cover the opposite issue of going from portrait to landscape zooming.

Some help would be greatly appreciated. I've spend many hours searching without success.

Here's a link if you wish to try it on a mobile device: http://www.blueberry-studio.co.uk/Robomoco_Websites/Device_iPhone_5/

and here's the code used:

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

1 に答える 1