移动端Web开发如何处理横竖屏

<!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">
// window.orientation :这个属性给出了当前设备的屏幕方向，0表示竖屏，正负90表示横屏（向左与向右）模式
// onorientationchange : 在每次屏幕方向在横竖屏间切换后，就会触发这个window事件，用法与传统的事件类似
(function(){
var supportOrientation=(typeof window.orientation == "number" && typeof window.onorientationchange == "object"); //判断浏览器是否支持orientationvar 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(){ //如果当前浏览器不支持orientation，则使用最简单的方法（判断窗口的高宽）
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>
<div>
移动端Web开发如何处理横竖屏
</div>
</body>
</html>

转载于:https://www.cnblogs.com/kt520/p/5681563.html

移动端Web开发如何处理横竖屏相关推荐

移动Web开发实战-横竖屏适配
概述在我们平时的移动Web页面开发过程中,经常会遇到需要横竖屏处理的情况.一般情况下我会项目实际情况,比如页面一般打开的情景是横屏还是竖屏,项目是否需要增加横竖屏适配,页面结构是否复杂等. 情景一 ...
轻松掌握移动端web开发【尺寸适配】常用解决方案
本文主要针对初学移动端web开发的读者,笔者也是初学者,文中有众多用词不当之处望读者指正. 前言从开始做web app开发到现在,一直对移动端的尺寸适配有一种模糊的概念.能说得上来'媒体查询','栅 ...
移动端 Web 开发踩坑之旅
前言最近在一个移动端的 Web 项目中踩了很多的坑,感觉有必要把它们记录下来,分享给即将踏入移动端 Web 开发大门的新人们. 一.从布局说起移动端的整体布局一般来说可以分为上中下三个部分,分别为 ...
移动端Web开发小记
之前为公司商旅频道写移动端的页面时遇到不少问题,今特来个总结,希望能为后来者带来一些帮助. 不再考虑浏览器兼容性移动端开发主要对象是手持设备,其中绝大部分是IOS和Android系统,so,在开发此 ...
移动端WEB开发之响应式布局(响应式开发原理、bootstrap、阿里百秀案例)
移动端WEB开发之响应式布局 1.1 响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 设备的划分情况: <!DOCTYPE html> & ...
20.【移动端Web开发之响应式布局】
文章目录 [移动端Web开发之响应式布局]前端小抄(20) 一.响应式开发 1.1 响应式开发原理 1.2 响应式布局容器二.Bootstrap前端开发框架 2.1 Bootstrap简介 2.2 ...
# 移动端web开发
### 概述随着互联网技术的快速发展,加之智能设备的迅速普及,传统网站都已经逐渐向移动端转移和扩展,移动端web开发技术的掌握也显得尤为重要. 移动端Web主要指运行在移动端(手机.ipad)的we ...
移动端WEB开发——响应式布局
移动端WEB开发之响应式布局 1.0 响应式开发原理 1.1 响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 设备的划分情况: 设备划分尺寸区间超 ...
移动端Web开发基础知识
文章目录移动端Web开发移动端基础浏览器视口样式编写分辨率和设备像素比二倍图 SVG矢量图移动端Web开发移动Web开发的两种主流方案,一种是单独制作移动端页面,另一种是制作响应式页 ...

移动端Web开发如何处理横竖屏

移动端Web开发如何处理横竖屏相关推荐

最新文章

热门文章