实现手机端页面自动横屏显示

如题，在做手机端页面时会遇到需要固定横屏显示的页面，很多人的做法是直接给一个横屏提醒，我也不例外。不过大佬给了我一个新的思路，让页面不管是横着拿着还是竖着拿着都是横屏显示。

思路：监听页面的orientation，也即方向变化。当为竖屏时，页面的高度为原来的宽度，宽度为原来的高度，并通过rotate使页面旋转，可参考css代码。由于旋转需要在中心位置，所以需要绝对定位将页面往下和右偏移50%，再通过translate移回原来位置，这样就实现了横竖屏切换的问题了。

以下是代码：

CSS:

#screen-change{position:absolute;left:50%;top:50%;overflow:hidden;z-index:10}
#screen-change.w{height:100vw;width:100vh;transform:translate(-50%,-50%) rotate(90deg);-webkit-transform:translate(-50%,-50%) rotate(90deg)}
#screen-change.h{height:100vh;width:100vw;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%)}

JS:

! function () {var viewport = document.getElementById('viewport');var dw = null;var screenChange = document.getElementById('screen-change');function a() {if (document.body.clientHeight > document.body.clientWidth) {dw = 750;        //页面的高度screenChange.classList.remove('h');screenChange.classList.add('w');} else if (document.body.clientHeight < document.body.clientWidth) {dw = 1334;        //页面的宽度}viewport.setAttribute('content', 'width=' + dw + ', user-scalable=no')}a();window.addEventListener("orientationchange", function () {if (window.orientation == 0) {screenChange.classList.remove('h');screenChange.classList.add('w');dw = 750;        //页面的高度viewport.setAttribute('content', 'width=' + dw + ', user-scalable=no')} else if (window.orientation == 90) {screenChange.classList.remove('w');screenChange.classList.add('h');dw = 1334;        //页面的宽度viewport.setAttribute('content', 'width=' + dw + ', user-scalable=no')}}, false);
}(window);

HTML:直接给body或者在所有标签外面套一层div，给这层元素加上id="screen-change"和class="h"，并且在viewport meta标签内添加id="viewport"，如

<meta name="viewport" id="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"><body id="screen-change" class="h"><div>我要横屏显示</div>
</body>

实现手机端页面自动横屏显示相关推荐

手机html强制横屏显示,Css实现手机端页面强制横屏(仅适用与一屏页面)
样式 @media screen and (orientation: portrait) { html{ width : 100vmin; height : 100vmax; } body{ widt ...
Css实现手机端页面强制横屏
样式 @media screen and (orientation: portrait) {html{width : 100vmin;height : 100vmax;}body{width : 10 ...
html手机自动放大,解决HTML5手机端页面缩放的问题
通常在写HTML5手机端页面的时候,我们会发现页面所显示元素的比例不正确,那此时我们需要添加的就是: 或者是那么我们来对这句话解释一下就是: viewport : 表示的是显示窗口: width=d ...
html页面手机自动缩放,解决HTML5手机端页面缩放的问题
通常在写HTML5手机端页面的时候,我们会发现页面所显示元素的比例不正确,那此时我们需要添加的就是: 或者是那么我们来对这句话解释一下就是: viewport : 表示的是显示窗口: width=d ...
java手机界面太小_手机端页面在项目中遇到的一些问题及解决办法
原标题:手机端页面在项目中遇到的一些问题及解决办法来源:键盘上的眼泪 segmentfault.com/a/1190000015178877 1.解决页面使用overflow: scroll在iOS ...
Bootstrap4+MySQL前后端综合实训-Day04-AM【新闻管理手机端页面+数据库操作(PowerDesigner 图形化数据库设计软件、SQLyog软件)】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记] 目录 W3C标准盒子模型和IE盒子模型的区别 Bootstrap4--新闻管理手机端页面菜 ...
手机端页面自适应解决方案—rem布局进阶版
旧版rem布局 <手机端页面自适应解决方案-rem布局>, 此方案仅适用于移动端web 文章底部常见问题说明第四条,笔者已给出一个相当便捷的解决方案,欢迎留言交流.(2017/9/9) 该 ...
html5手机端页面缩放问题的解决
通常在写HTML5手机端页面的时候,我们会发现页面所显示元素的比例不正确,那此时我们需要添加的就是: <meta name="viewport" content=" ...
手机端页面的自适应设计的开发思路
一直在找有关手机端页面自适应写得比较好的文章,今天终于找到一篇,个人觉得写得很详细.如果想要拿到需求就知道要适用什么方法,除了要熟练规则.多参考一些优秀网站,还要动手实践几次. 以下为转发的正文: 互 ...

实现手机端页面自动横屏显示

实现手机端页面自动横屏显示相关推荐

最新文章

热门文章