iPad旋转和使用jQuery Mobile处理SVG问题

Question

iPad旋转和使用jQuery Mobile处理SVG问题

3

我有一个包含以下内容的HTML页面。svg.js文件是对svgweb的引用，来自http://code.google.com/p/svgweb/。

如果您在iPad上查看并多次从横向旋转到竖向，则图表会消失在页面底部。似乎每次回到垂直位置时，svg都会向下跳一点。

感谢提供开始寻找线索的提示。

<!DOCTYPE html>
<html>
<head>
  <title>Dashboard</title>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" /> 
  <script src="/site_media/svgweb/svg.js" type="text/javascript"></script>
  <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
</head>
<body>
 <div data-role="page" id="SingleChart" data-theme="a"> 
  <div data-role="header"  data-position="fixed">
    <h1>Chart Type Pie</h1>
  </div><!-- /header -->

  <div data-role="content" >

   <div id="chartDiv">
<script type="image/svg+xml">
 <svg xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 viewBox="0 0 300 300" width="100%" height="100%">
<path id='s0' d='M150,150 L50,150 A100,100 0 0,1 57 111 L150,150' style='stroke:#660000; fill:green;'/>
<path id='s1' d='M150,150 L57,111 A100,100 0 0,1 150 50 L150,150' style='stroke:#660000; fill:orange;'/>
<path id='s2' d='M150,150 L150,50 A100,100 0 0,1 220 220 L150,150' style='stroke:#660000; fill:green;'/>
<path id='s3' d='M150,150 L220,220 A100,100 0 0,1 50 150 L150,150' style='stroke:#660000; fill:orange;'/>

<text x="-50" y="50" font-family="Verdana" font-size="24" font-weight="bold" text-anchor="middle" fill="rgb(200,200,200)" transform="rotate(270 10 100)">Example Chart</text>
</svg>

  </div><!--content-->
</div><!--page-->
</body>
</html>

- Tim

负的180对我不起作用，我必须使用正的180来触发上下颠倒的旋转。 - Benjamin

2个回答

0

更新脚本，使用“180”而不是“-180”来处理//倒立的肖像。

还添加了检查平台是否严格等于iPad才能运行的功能。

if(navigator.platform === 'iPad') {
        window.onorientationchange = function() {

        var orientation = window.orientation;

        // Look at the value of window.orientation:
        if (orientation === 0) {
        // iPad is in Portrait mode.

        } else if (orientation === 90) {
         // iPad is in Landscape mode. The screen is turned to the left.

        } else if (orientation === -90) {
         // iPad is in Landscape mode. The screen is turned to the right.

        } else if (orientation === 180) {
        // Upside down portrait.

        }
      }       
    }

- user1149756

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Glenn · Accepted Answer

我遇到了类似的问题。这个bug只在iPad上出现（而不是iPhone或Android），而且需要多次旋转才会出现，这让我怀疑它是一种iPad特有的浏览器bug。为了快速解决，我使用JavaScript实现了一个解决方案来检测旋转并插入替代的HTML / CSS。如果你的SVG图像很小，你可以尝试在旋转时重新将它插入到DOM中，以强制重新计算。

window.onorientationchange = function(){

    var orientation = window.orientation;

    // Look at the value of window.orientation:

    if (orientation === 0){
   // iPad is in Portrait mode.

    }

    else if (orientation === 90){

        // iPad is in Landscape mode. The screen is turned to the left.

    }


    else if (orientation === -90){

        // iPad is in Landscape mode. The screen is turned to the right.

    }

   else if (orientation === -180){

        // Upside down portrait.

    }

}

代码取自: iPad从竖屏到横屏时不会触发resize事件？

（注意：本文为技术翻译，如有专业术语或行业黑话请谅解）