移动网页横竖屏兼容适应的一些体会
2014-11-24 15:23
288 查看
【文章前提】
最近接到一个需求,是一个需要在手机端横屏显示的滑页类型的页面。这个页面需要兼容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中成长,增长见识真是极好的啊~~~
最近接到一个需求,是一个需要在手机端横屏显示的滑页类型的页面。这个页面需要兼容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中成长,增长见识真是极好的啊~~~
相关文章推荐
- ASP.net下使用static变量的一些体会
- FF和IE的一些兼容解决方案
- 对Fedora9的一些心得体会(另附一些开端设置)
- 【Android开发经验】兼容不同的屏幕大小(推荐,最官方的适应屏幕大小的经验)
- 加速网站访问的一些实践体会
- Auto Layout中的contraints设置的一些体会
- 关于编译com工程的一些体会
- DIV+CSS相对部分浏览器兼容问题的一些解决方案
- 关于软件研发的一些体会总结
- 一个项目经理的一些个人体会
- 实际使用NoSQL——MongoDB的一些体会
- 最近的一些编程体会(未完)
- c# 使用ChartDirector绘图的一些个人体会
- RESTful Web Service的一些新体会
- 用isapi开发论坛的一些体会
- Struts2<s:iterator value="" var="lst">中var的使用和一些标签的使用体会
- WF的一些技术细节与应用体会(三)
- 项目管理一些体会
- 开发中遇到的一些版本兼容问题-setBackground