基于HTML5的iPad电子杂志横竖屏自适应方案-出家如初,成佛有余

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

大致思路：

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

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

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

function orient() {

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值，此种情况下图片能够很好自动适配横屏、竖屏，但缺点是图片不能够手动进行缩放

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

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

一些可供参考的资料:

备注:

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

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

2、可以测试一下

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

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