移动网页横竖屏兼容适应的一些体会

【文章前提】

最近接到一个需求，是一个需要在手机端横屏显示的滑页类型的页面。这个页面需要兼容iphone和安卓，也就是可以不支持wp。

设计图给的是宽图，也就是宽度>高度的图片。但是手机默认情况下，大家都是会选择竖屏的，或者直接是禁止手机横屏显示的，我就是其中这样的一个人，同时我发现身边的人一般都是禁止手机自动选择屏幕的，因为这样反而会带来一些麻烦。所以大多情况下，用户竖屏显示。

既然接到了这样的需求，所以还是要想办法实现的。

办法总是比方法多的。

【实践过程】

因为是第一次来做这样的适应，所以在这上面做了很多种尝试。

~~~ 第一种实践~~~

1、写一个css文件，但是里面会写两个适应的内容。通过@media all and  (orientation : landscape)来判断是横屏，默认是竖屏的样式，当遇到横屏时，横屏显示样式。这个，在后来的实践中，都是没有问题的。

2、js，这个问题会比较多。因为横屏和竖屏所触发的事件会有一些不同。

比如：

横屏的时候，是这样的：

竖屏的时候是这样的：

分析上面这两张图，就可以发现，当横屏的时候，手指滑动是计算moveX，图片的位移也是x轴上的。

而竖屏的时候，是计算moveY，图片的位移是Y轴上的。

以上这两个不同的地方，就需要在程序中判断不同的旋转方向了。

第一次的时候，做了两套js，当屏幕的宽度大于屏幕的高度的时候，判断是横屏，加载横屏的js。当屏幕是竖屏的时候，加载竖屏的js。加载js使用异步加载的方式。

当用户旋转了屏幕，监听resize事件，发生旋转的时候，刷新页面，这样在安卓上是完美实现了需求了的。

但是客户用iphone打开的时候，却发现，旋转刷新的时候，微信直接卡死闪退了。所以无奈此举在安卓上ok却让iphone出问题了，只好放弃第一种实践方式。

~~~ 第二种实践方式~~~

1、css和之前的没有变化

2、js写在同一个文件中，旋转屏幕的时候，不进行刷新操作。

3、代替的方法是通过判断横屏还是竖屏，初始化各种参数。包括加载图片，页面的宽高等，滑页的事件。

4、当旋转屏幕的时候，重新绑定事件，重新设置必要样式，重新加载相应需要改变的图片等。

----问题出现了：

出现重新绑定事件会有一些bug出现。

一怒之下，抛弃之。

~~~ 第三种 ~~~

之前绑定事件都是分开绑定的，比如横屏是的swipe1，竖屏就是swipe2

第三种方式不是分开了，而是把两个可能都写在一个函数中，然后在函数中通过判断横竖屏来选择相应的操作。

第三种方法就解决了第二种方法的bug。

旋转屏幕后大概流程是这样的：

1、重新获取屏幕的高度和宽度

2、重新设置页面的宽度和高度

3、重新设置下需要滑动的图片容器的样式。

4、重新加载图片

以上就可以了。

而事件的判断，已经都写在函数中了，执行的时候会进行判断是横屏或者竖屏。

虽然这样看上去似乎会影响到性能，但是能够解决bug，也就暂且这样了。

在这个过程中，发现了一个问题。

这个问题我发了帖子，可以前往地址查看问题，懂的就回答，同问的可以参考其他人提供的回帖。http://bbs.csdn.net/topics/390939397

ps：虽然遇到bug的时候，会吐槽客户怎么做这样的页面之类的。但是却喜欢，因为可以做一些自己没有接触过的东西，在bug中成长，增长见识真是极好的啊~~~