移动端强制横屏显示

记下一些项目中的总（da）结（keng）“移动端强制横屏显示页面”：

开发后效果如下（请原谅小弟没水果手机）：

思路：通过好用的媒体查询检测屏幕方向，若为竖屏则将页面 ‘强制横屏’ 展示，并通过横竖屏动态设置 rem 方式保证适配，那么如何强制横屏呢？代码如下↓↓↓↓↓↓↓↓↓↓↓↓↓

核心代码：css/js

 1 /*
 2  * 强制横屏显示：通过竖屏时旋转解决横屏问题
 3  * 
 4  */
 5 @media screen and  (orientation:  portrait){
 6     #wrapper {
　　　　　　
 7         -webkit-transform:rotate(90deg);
 8         -webkit-transform-origin:0% 0%;/*1.重置旋转中心*/
 9         
10         -moz-transform: rotate(90deg);
11         -moz-transform-origin:0% 0%;
12         
13         -ms-transform: rotate(90deg);
14         -ms-transform-origin:0% 0%;
15         
16         transform: rotate(90deg);
17         transform-origin:0% 0%;
18         
19         width: 100vh;/*2.利用 vh 重置 ‘宽度’ */
20         height: 100vw;/* 3.利用 vw 重置 ‘高度’ */
21         
22         top: 0;
23         left: 100vw;/* 4.旋转后页面超出屏幕，重置页面定位位置 */
24     }
25 }

 1 setRem();
 2         window.addEventListener("onorientationchange" in window ? "orientationchange":"resize",function(){
 3             setRem();
 4         });
 5         function setRem(){
 6             var html = document.querySelector("html");
 7             var width = html.getBoundingClientRect().width;
 8             var height = html.getBoundingClientRect().height;
 9             //判断横屏
10             if(width < height){
11                 //竖屏
12                 html.style.fontSize = height/16 +"px";
13             };
14             if(width > height){
15                 //横屏
16                 html.style.fontSize = width/16 +"px";
17             }
18             
19         }

1.旋转中心的设置，大家知道默认旋转中心为 x，y 的 50% 50%，如果不重置的话你将看到下面图片的效果（我一开始看到这个效果内心只有 ‘啥玩意’ 这三个字）：

2.重置旋转中心并旋转90°后的效果（需要通过定位属性重置页面位置）：

重置旋转点后页面位置旋转到 ‘红框’ 位置了，此时将其定位回来就可以了（left:100vw）

3.此时页面已经旋转过来了我们需要重置页面的宽高，让其原本页面宽度等于旋转后屏幕的高度（即100vh），原本高度等于屏幕的宽度（即100vw）;这样页面就能保证100%撑满屏幕了；

4.页面开发按横屏设计图和水果6手机的分辨率做的 rem 适配，页面竖屏和横屏时别忘记重置rem跟标签rem比值以达到横竖屏缩放效果相同；

最后注意：如果页面中有select（option展开方向问题），canvas（有点击事件，点击位置错位问题）还需要单独处理

移动端强制横屏显示

猜你喜欢