使用 jQuery Mobile 进行 iPad 旋转和 SVG
我有一个包含以下内容的 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>
I have an HTML page containing the following. The svg.js file is a reference to svgweb, from http://code.google.com/p/svgweb/
If you view this on an ipad, and rotate from horizontal to vertical several times, the chart disappears off the bottom of the page. It seems that each time we go back to vertical, the svg jumps down the page a little.
Clues as to where to start looking appreciated.
<!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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我经历过类似的错误。事实上，它仅在多次旋转后出现在 iPad 上（而不是在 iPhone 或 Android 上），这让我怀疑这是 iPad 特定的浏览器错误。作为快速修复，我使用 javascript 实现了一个解决方案，该解决方案检测旋转并插入备用 html/css。如果您的 SVG 图像很小，您可能只需尝试将其重新插入到旋转的 DOM 中以强制重新评估。
代码取自：
iPad 不会触发从垂直到水平的调整大小事件？
I experienced a similar bug. The fact that it only occurs on the iPad (not on iphone or android) after several rotations leads me to suspect that it is an IPad specific browser bug. As a quick fix I implemented a solution with javascript that detected rotation and inserted alternate html/css. If your SVG image is small you might just try reinserting it into the DOM on rotation to force a revaluation.
Code taken from:
iPad doesn't trigger resize event going from vertical to horizontal?
更新了脚本以使用“180”而不是“-180” // 颠倒肖像。
还添加了检查平台是否与 iPad 严格相等的运行平台。
Updated script to use "180" rather than "-180" for // Upside down portrait.
Also added to check if platform is strickly equal to iPad to run.