基于HTML5的iPad电子杂志横竖屏自适应方案

(转载自：http://www.yeeach.com/?p=1172)

  基于HTML5来制作iPad电子杂志，横屏及竖屏自适应是个大问题，查找了半天资料，没有一篇像样的文章可供参考。将思路及例子分享一下。例子并不严谨和规范，仅供参考。

大致思路：

1、对横屏（portrait）和竖屏（landscape）情况下的页面定义两个不同的HTML5页面文件及图片

2、使用iframe来包含横屏（portrait）和竖屏（landscape）时候实际要包含的页面内容，注意此处没有指定iframe的src属性

<iframe id=”iframe1″ name=”iframe1″ frameborder=”0″ scrolling=”no” />

3、使用jQuery Mobile来横屏（portrait）和竖屏（landscape）情况来动态改变iframe的src属性，指向横屏

<script type=”text/javascript”>
functionorient() {if (window.orientation == 0 || window.orientation == 180) {$(“body”).attr(“class”, “portrait”);orientation=‘portrait’;$(“#iframe1″).attr(“src”,”portrait.html”);$(“#iframe1″).attr(“width”,”768″);$(“#iframe1″).attr(“height”,”1024″);return false;}else if (window.orientation == 90 || window.orientation == -90) {$(“body”).attr(“class”, “landscape”);orientation=‘landscape’;$(“#iframe1″).attr(“width”,”1024″);$(“#iframe1″).attr(“height”,”768″);$(“#iframe1″).attr(“src”,”landscape.html”);return false;}
}

4、采用meta 的viewport属性来控制iPad或iphone的屏幕属性。

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

此处 user-scalable=no,minimum-scale=1.0, maximum-scale=1.0值，此种情况下图片能够很好自动适配横屏、竖屏，但缺点是图片不能够手动进行缩放

因此在实际应用中最好采用采用

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

5、采用3的方案后，由于iOS的bug，图片不能按照正常比例显示，采用一个javascript补丁解决此问题

iOS-Orientationchange-Fix

一些可供参考的资料:

http://stackoverflow.com/questions/2557801/how-do-i-reset-the-scale-zoom-of-a-web-app-on-an-orientation-change-on-the-iphon

http://web.peterhartree.co.uk/2012/jquery-mobile-orientationchange-supplement/

http://www.blog.highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug/

http://davidbcalhoun.com/2010/dealing-with-device-orientation

备注:

1、可以使用css针对横屏或竖屏指定不同的CSS文件，这在以文字为主的页面文件中可以直接通过指定横屏和竖屏时候的css文件来实现横竖屏切换。

由于目前电子杂志以图片为主，因此采用iframe来包含横竖屏文件，因此此种方案目前无用。

<link rel=”stylesheet” media=”all and (orientation:portrait)” href=”portrait.css”>

<link rel=”stylesheet” media=”all and (orientation:landscape)” href=”landscape.css”>

2、可以测试一下

jquery.mobile-1.1.0.min.js脚本必须放在jquery-1.6.4.min.js脚本前，否则会在页面显示Loading

<script type=”text/javascript” src=”jquery.mobile-1.1.0.min.js”></script>

<script type=”text/javascript” src=”jquery-1.6.4.min.js”></script>

例子下载请点击此处