位置: 编程技术 - 正文
Mobile Web开发基础之四--处理手机设备的横竖屏问题(web开发手机app)
编辑：rootadmin推荐整理分享Mobile Web开发基础之四--处理手机设备的横竖屏问题(web开发手机app)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:web移动开发,web开发教程,web开发手册,web手机开发,web开发工具手机版,web开发手机app,web手机开发,web手机开发,内容如对您有帮助，希望把文章链接给更多的朋友！
为了应对移动设备屏幕的碎片化，我们在开发Mobile Web应用时，一个最佳实践就是采用流式布局，保证最大可能地利用有限的屏幕空间。由于屏幕存在着方向性，用户在切换了屏幕的方向后，有些设计上或实现上的问题就会凸显——我们至少需要处理一下当前显示元素的宽度的适配（当然，要做的可能不仅仅是这个）。很多时候，我们需要为不同的屏幕方向来设计对应的应用显示模式，这个时候，实时地获知设备的模竖屏状态就显得极为重要。
window.orientation属性与onorientationchange事件window.orientation :这个属性给出了当前设备的屏幕方向，0表示竖屏，正负表示横屏（向左与向右）模式onorientationchange : 在每次屏幕方向在横竖屏间切换后，就会触发这个window事件，用法与传统的事件类似
1：使用onorientationchange事件的回调函数，来动态地为body标签添加一个叫orient的属性，同时以body[orient=landspace]或body[orient=portrait]的方式在css中定义对应的样式，这样就可以实现在不同的屏幕模式下显示不同的样式。如下代码示例：
2: 类似的思路，不通过CSS的属性选择器来实现，如下代码的实现方案：
使用media query方式
这是一种更为方便的方式，使用纯CSS就实现了对应的功能，如下代码演示：
低版本浏览器的平稳降级如果目标移动浏览器不支持media query，同时window.orientation也不存在，则我们需要采用另外一种方式来实现————使用定时器“伪实时”地对比当前窗口的高(window.innerHeight)与宽(window.innerWidth)之比，从而判定当前的横竖屏状态。如下代码所示：
统一解决方案将以上的两种解决方案整合在一起，就可以实现一个跨浏览器的解决方案，如下代码：
原英文网址： Web开发基础之四--处理手机设备的横竖屏问题，希望对大家有所帮助！
JSON对象转化为字符串详解 序列化定义指将JavaScript值转化为JSON字符串的过程。JSON.stringify()能够将JavaScript值转换成JSON字符串。JSON.stringify()生成的字符串可以用JSON.parse()再还原成Ja
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获 在学校，听老师讲解事件冒泡和事件捕获机制的时候跟听天书一样，只依稀记得IE使用的是事件冒泡，其他浏览器则是事件捕获。当时的我，把它当成IE
带你了解session和cookie作用原理区别和用法 Cookie概念在浏览某些网站时,这些网站会把一些数据存在客户端,用于使用网站等跟踪用户,实现用户自定义功能.是否设置过期时间:如果不设置过期时间,
标签: web开发手机app
本文链接地址:https://www.jiuchutong.com/biancheng/377533.html 转载请保留说明！上一篇：JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结(简述js json对象和字符串的转换方式)
