移动端开发之处理手机设备的横竖屏
这篇文章主要介绍了Mobile Web开发基础之-—处理手机设备的横竖屏，window.orientation属性与onorientationchange事件以及media query方式是开发过程中需要注意到的两种解决方式,需要的朋友可以参考下
为了应对移动设备屏幕的碎片化，我们在开发Mobile Web应用时，一个最佳实践就是采用流式布局，保证最大可能地利用有限的屏幕空间。由于屏幕存在着方向性，用户在切换了屏幕的方向后，有些设计上或实现上的问题就会凸显——我们至少需要处理一下当前显示元素的宽度的适配（当然，要做的可能不仅仅是这个）。很多时候，我们需要为不同的屏幕方向来设计对应的应用显示模式，这个时候，实时地获知设备的模竖屏状态就显得极为重要。
window.orientation属性与onorientationchange事件
window.orientation :这个属性给出了当前设备的屏幕方向，0表示竖屏，正负90表示横屏（向左与向右）模式
onorientationchange : 在每次屏幕方向在横竖屏间切换后，就会触发这个window事件，用法与传统的事件类似
1：使用onorientationchange事件的回调函数，来动态地为body标签添加一个叫orient的属性，同时以body[orient=landspace]或body[orient=portrait]的方式在css中定义对应的样式，这样就可以实现在不同的屏幕模式下显示不同的样式。如下代码示例：
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
<title>横竖屏切换检测</title>
<style type="text/css">
body[orient=landscape]{
background-color: #ff0000;
}
body[orient=portrait]{
background-color: #00ffff;
}
</style>
</head>
<body orient="landspace">
<p>
内容
</p>
<script type="text/javascript">
(function(){
if(window.orient==0){
document.body.setAttribute("orient","portrait");
}else{
document.body.setAttribute("orient","landscape");
}
})();
window.onorientationchange=function(){
var body=document.body;
var viewport=document.getElementById("viewport");
if(body.getAttribute("orient")=="landscape"){
body.setAttribute("orient","portrait");
}else{
body.setAttribute("orient","landscape");
}
};
</script>
</body>
</html>2: 类似的思路，不通过CSS的属性选择器来实现，如下代码的实现方案：
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
<title>横竖屏切换检测</title>
<style type="text/css">
.landscape body {
background-color: #ff0000;
}
.portrait body {
background-color: #00ffff;
}
</style>
</head>
<body orient="landspace">
<p>
内容
</p>
<script type="text/javascript">
(function(){
var init=function(){
var updateOrientation=function(){
var orientation=window.orientation;
switch(orientation){
case 90:
case -90:
orientation="landscape";
break;
default:
orientation="portrait";
break;
}
document.body.parentNode.setAttribute("class",orientation);
};
window.addEventListener("orientationchange",updateOrientation,false);
updateOrientation();
};
window.addEventListener("DOMContentLoaded",init,false);
})();
</script>
</body>
</html>
使用media query方式
这是一种更为方便的方式，使用纯CSS就实现了对应的功能，如下代码演示：
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
<title>横竖屏切换检测</title>
<style type="text/css">
@media all and (orientation : landscape) {
body {
background-color: #ff0000;
}
}
@media all and (orientation : portrait){
body {
background-color: #00ff00;
}
}
</style>
</head>
<body>
<p>
内容
</p>
</body>
</html> 低版本浏览器的平稳降级
如果目标移动浏览器不支持media query，同时window.orientation也不存在，则我们需要采用另外一种方式来实现————使用定时器“伪实时”地对比当前窗口的高(window.innerHeight)与宽(window.innerWidth)之比，从而判定当前的横竖屏状态。如下代码所示：
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
<title>按键</title>
<style type="text/css">
.landscape body {
background-color: #ff0000;
}
.portrait body {
background-color: #00ffff;
}
</style>
<script type="text/javascript">
(function(){
var updateOrientation=function(){
var orientation=(window.innerWidth > window.innerHeight)? "landscape" : "portrait";
document.body.parentNode.setAttribute("class",orientation);
};
var init=function(){
updateOrientation();
window.setInterval(updateOrientation,5000);
};
window.addEventListener("DOMContentLoaded",init,false);
})();
</script>
</head>
<body>
<p>
内容
</p>
</body>
</html> 统一解决方案
将以上的两种解决方案整合在一起，就可以实现一个跨浏览器的解决方案，如下代码：
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
<title>横竖屏切换检测</title>
<style type="text/css">
.landscape body {
background-color: #ff0000;
}
.portrait body {
background-color: #00ffff;
}
</style>
<script type="text/javascript">
(function(){
var supportOrientation=(typeof window.orientation == "number" && typeof window.onorientationchange == "object");
var updateOrientation=function(){
if(supportOrientation){
updateOrientation=function(){
var orientation=window.orientation;
switch(orientation){
case 90:
case -90:
orientation="landscape";
break;
default:
orientation="portrait";
}
document.body.parentNode.setAttribute("class",orientation);
};
}else{
updateOrientation=function(){
var orientation=(window.innerWidth > window.innerHeight)? "landscape":"portrait";
document.body.parentNode.setAttribute("class",orientation);
};
}
updateOrientation();
};
var init=function(){
updateOrientation();
if(supportOrientation){
window.addEventListener("orientationchange",updateOrientation,false);
}else{
window.setInterval(updateOrientation,5000);
}
};
window.addEventListener("DOMContentLoaded",init,false);
})();
</script>
</head>
<body>
<p>
内容
</p>
</body>
</html>以上是移动端开发之处理手机设备的横竖屏的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
三星 Galaxy S25 Ultra 手机曝料：6.86 英寸、横向屏占比 94.1%
Aug 17, 2024 pm 01:49 PM
8月17日消息，消息源@i冰宇宙今天发布微博，表示苹果iPhone16ProMax精确尺寸6.88英寸，GalaxyS25Ultra精确尺寸6.86英寸，两者都可视为6.9英寸。消息源表示三星GalaxyS25Ultra比S24Ultra更窄的机身，还有更宽的屏幕，横向屏占比94.1％，而S24Ultra横向屏占比是91.5％。fenye查询该消息源相关微博，他还评论了最新曝光的iPhone16ProMax照片，认为接近微曲是错误的，该机然是直屏+2.5D玻璃。
'串联OLED”被苹果带火了，比OLED强在哪里？
Aug 19, 2024 am 04:42 AM
虽然最近几年的苹果一直被诟病创新不足，但是苹果也并不总是止步不前。至少在硬件设计上，在苹果产品的高单价支持下，它的工程师可以轻松尝试一些全新的技术，而不需要过多的考虑成本问题。比如iPadPro，作为苹果最喜欢的“显示技术”试验田，iPadPro从2021年的miniLED到2024年的串联OLED，一直走在便携智能设备的显示技术前沿。虽然iPadPro并非首个搭载miniLED屏幕的便携智能设备（微星较苹果早一年发布miniLED笔记本电脑），但是当你对比两者的参数，你会很快意识到他们不是一个
海力士抢先展示UFS 4.1闪存：基于V9 TLC NAND颗粒打造
Aug 09, 2024 pm 03:33 PM
8月9日消息，在FMS2024峰会上，SK海力士展示了其最新的存储产品，包括尚未正式发布规范的UFS4.1通用闪存。据JEDEC固态技术协会官网信息，目前公布的最新UFS规范是2022年8月的UFS4.0，其理论接口速度高达46.4Gbps，预计UFS4.1将在传输速率上实现进一步的提升。1.海力士展示了512GB和1TBUFS4.1通用闪存产品，基于321层V91TbTLCNAND闪存。SK海力士还展出了3.2GbpsV92TbQLC和3.6GbpsV9H1TbTLC颗粒。海力士展示了基于V7
首发1.5K屏下摄像！努比亚Z70 Ultra来了：全球首款骁龙8 Gen4真全面屏手机
Aug 19, 2024 pm 03:47 PM
8月19日消息，努比亚自Z50Ultra发布以来，一直秉承着真全面屏的设计，并且一直在高像素屏下前摄领域不断探索。今日，据数码博主智慧皮卡丘爆料称，今年下半年即将发布的努比亚Z70Ultra将首发1.5K屏下摄像技术，是迄今为止行业内分辨率最高的UDC方案。据悉，目前中兴旗下的屏下前摄方案已推进到第六代。最新的屏下前摄方案在努比亚Z60Ultra、红魔9SPro系列中皆有所应有。屏幕分辨率为2480x1116，介于1080P和1.5K分辨率之间。这一次努比亚将通过突破现有分辨率的限制，将在行业内
为本地运行谷歌 Gemini Nano AI 模型，三星 Galaxy S25 Ultra 手机被曝配 16GB 内存
Jul 31, 2024 pm 05:55 PM
7月31日消息，消息源@i冰宇宙昨日（7月30日）在X平台发布推文，只写道“16GByes！”，但从上下推文来判断，应该是指三星GalaxyS25Ultra手机将会配备16GB的内存。三星手机内存容量更新三星曾在GalaxyS20Ultra和GalaxyS21Ultra手机上推出过16GB内存。从GalaxyS22Ultra开始，包括最新旗舰GalaxyS24Ultra手机，三星手机的内存容量上限均为12GB。有消息称，即将推出的三星GalaxyS25和GalaxyS25+将采用12GBLPDD
苹果华为都想做的无按键手机，被小米先做出来了？
Aug 29, 2024 pm 03:33 PM
根据Smartprix的爆料称，小米正在研发一台代号为「朱雀」的无按键手机。这份爆料称，这台代号朱雀的手机将秉承一体化的理念设计，使用屏下摄像头，并搭载高通骁龙8gen4处理器，如果计划没有变动，我们很可能在2025年看到它的到来。看到这个消息，我恍惚间以为自己回到了2019年——那时候小米发布了小米MIXAlpha概念机，环绕屏无按键设计相当惊艳。这是我第一次见识到无按键手机的魅力。想要一块「魔力玻璃」，就要先把按键干掉在《乔布斯传》中，乔布斯曾经表达过：希望手机能够像一块「充满魔力的玻璃」，
宁德新能源科技公司生产，三星 Galaxy S25 Ultra 手机电池曝光
Jul 31, 2024 pm 04:57 PM
7月31日消息，科技媒体SamMobile昨日（7月30日）发布博文，在SafetyKorea认证网站发现了适用于三星GalaxyS25Ultra手机的电池信息。根据公示的信息，本次曝光的电池型号为EB-BS938ABY和EB-BS938ABE，暂不清楚两个型号有何不同。fenye三星GalaxyS25Ultra手机不会采用GalaxyZFold6、GalaxyZFlip6折叠手机的双电池方案，而是采用单电池设计。此前曾报道，三星不会升级和优化GalaxyS25Ultra手机的电池规格，依然会采
华为Mate 70系列配置泄露：全系1.5K屏幕 配超大电池
Aug 08, 2024 pm 10:21 PM
8月8日消息，华为Mate70系列手机的详细配置信息近日被曝光，该系列手机预计将在2024年第四季度发布。1.据爆料，Mate70系列将全系采用定制的顶级1.5K分辨率屏幕，满足用户对屏幕清晰度的要求。预计华为Mate70Pro以及超大杯版本将配备四等深屏幕，而标准款的Mate70则可能采用略小的类直屏设计。除了屏幕升级，华为Mate70系列还将全系配备新基材的超大容量电池，预示着华为Mate系列手机续航能力的突破。尽管华为正在研发超声波指纹解锁技术，但今年的Mate70系列将不会搭载此功能。此
