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

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

技术 admin 379浏览 0评论

     基于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”>

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

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

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

 

例子下载请点击此处

 

转载请注明:出家如初,成佛有余 » 基于HTML5的iPad电子杂志横竖屏自适应方案

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址