出家如初,成佛有余

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

Posted in 技术相关 by chuanliang on 2012/07/12

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

 

例子下载请点击此处

 

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s

%d 博主赞过: