下载鸥 > 网站下载 > 开发教程 > JS/JQuery

JS强制手机端横屏方法

541 2021-03-02 11:17:19

收藏
JS强制手机端横屏显示,需要通过代码来实现,我们需判断手机当前是否竖屏,如果是竖屏,就旋转网页让网页横屏显示,如果是横屏就不旋转网页。如何判断手机是否竖屏呢?

HTML代码:

<div class="lingan_1" id="lingan_1"><img src="img/1.jpg" width=100% height=400px></div>
为人让lingan_1元素能旋转,我们必须为它设置绝对定位,CSS代码如下:

.lingan_1 {  position: absolute; top: 0; left: 0; width: 90%; height: 100%;  }
通过JS代码来实现网页在手机竖屏情况下的横屏展示:

//JS代码来判断:屏幕宽度 < 屏幕高度时,即竖屏,就让页面.lingan_1元素横屏显示const width = document.documentElement.clientWidth; //获取当前手机屏宽const height = document.documentElement.clientHeight; //手机褡高if (width < height) { //如果宽小于高,就是代表竖屏const contentDOM = document.getElementById('lingan_1'); //获取lingan_1元素contentDOM.style.width = height + 'px';  //设置该元素的宽等于屏高contentDOM.style.height = width + 'px'; //设置该元素的高等于屏宽contentDOM.style.top = (height - width) / 2 + 'px';
contentDOM.style.left = 0 - (height - width) / 2 + 'px';
contentDOM.style.transform = 'rotate(90deg)'; //让该元素旋转90度,使其横屏展示}

通过上面这段代码,就已经实现了在手机竖屏时横屏显示。

限制手机的“自动旋转”
方法1:判断屏宽度是否小于屏高:

//如果手机设置了自动旋转,还要以下代码来限制自动旋转,否则就悲催了const evt = "onorientationchange" in window ? "orientationchange" : "resize"; //onorientationchange是Html5的一个屏幕旋转事件window.addEventListener(evt, function () { //当触发了屏幕旋转事件时const width = document.documentElement.clientWidth; //屏宽const height = document.documentElement.clientHeight; //屏高const contentDOM = document.getElementById('lingan_1'); //获取元素if (width > height) { // 横屏contentDOM.style.width = width + 'px';
contentDOM.style.height = height + 'px';
contentDOM.style.top = '0px';
contentDOM.style.left = '0px';
contentDOM.style.transform = 'none'; //当机横屏时,不旋转}else {//alert('change to portrait')contentDOM.style.width = height + 'px';
contentDOM.style.height = width + 'px';
contentDOM.style.top = (height - width) / 2 + 'px';
contentDOM.style.left = 0 - (height - width) / 2 + 'px';
contentDOM.style.transform = 'rotate(90deg)'; //竖屏时旋转90度}
}, false);

经测试,这种方式在苹果手机上能正常实现我们想要的效果,即竖屏时页面横屏展示,手机横屏时不发生旋转。但是在安卓手机就悲催了,居然实现不了我们想要的效果。所以,这种方案果断放弃,也许是因为手机发生旋转时,JS获取到的屏宽依然是竖屏时的屏宽。

方法2:通过判断旋转角度来判断是否竖屏或横屏

const width = document.documentElement.clientWidth;const height = document.documentElement.clientHeight;var screen_width = width; //屏幕宽度if (width < height) {
screen_width = height; //如果 是竖屏,灵感的宽度就等于屏高const contentDOM = document.getElementById('lingan_1');
contentDOM.style.width = height + 'px';
contentDOM.style.height = width + 'px';
contentDOM.style.top = (height - width) / 2 + 'px';
contentDOM.style.left = 0 - (height - width) / 2 + 'px';
contentDOM.style.transform = 'rotate(90deg)';
}//根据手机旋转的角度来判断const evt = "onorientationchange" in window ? "orientationchange" : "resize"; //旋转事件window.addEventListener(evt, function () { //事件监听if (window.orientation === 90 || window.orientation === -90) { //旋转到 90 或 -90 度,即竖屏到横屏screen_width = height; //横屏,灵感的宽度就等于屏高contentDOM.style.width = height + 'px';
contentDOM.style.height = width + 'px';
contentDOM.style.top = '0px';
contentDOM.style.left = '0px';
contentDOM.style.transform = 'none'; //不旋转;}else{ //旋转到 180 或 0 度,即横屏到竖屏screen_width = height; //竖屏,灵感的宽度就等于屏高contentDOM.style.width = height + 'px';
contentDOM.style.height = width + 'px';
contentDOM.style.top = (height - width) / 2 + 'px';
contentDOM.style.left = 0 - (height - width) / 2 + 'px';
contentDOM.style.transform = 'rotate(90deg)'; //旋转90度}
}, false);

方法2中,我们通过旋转角度来判断,而不需要考虑旋转后屏幕的宽度。如果只是旋转了90度或-90度,就是竖屏,我们就设置页面旋转90度;如果手机旋转180度或0度,就不旋转页面。
经测试,在苹果手机和安卓手机上,都能实现我们想要的效果。

本文地址:https://xzo.com.cn/develop/js/652.html

有帮助,很赞!

信息来源:下载鸥
信息标签
导出教程 下载word版教程
发表评论 共有条评论
关于JS/JQuery


JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。

JavaScript十分强大,不管是前端页面开发、视觉动态渲染、数据交互还是后端逻辑处理,都可以通过JS实现。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中。

推荐JS/JQuery开发教程
JavaScript过滤XSS攻击方法
JavaScript过滤XSS攻击方法

什么是XSS?XSS(Cross Site Scripting),跨站脚本攻击,是一种允许攻击者在另外一个...

1 257
JS获取当前时间、日期、星期并每秒更新一次
JS获取当前时间、日期、星期并每秒更新一次

很多网站上会有当前年月日、星期、时间的展示。这个展示用php做未免浪费性...

0 288
JS点击复制data-*属性(支持多个元素)
JS点击复制data-*属性(支持多个元素)

分享一段js原生点击复制data-*属性的源码,根据onclick事件触发,复制当前元素...

0 278
swiper轮播图空白案例记录
swiper轮播图空白案例记录

今天鸥哥在用swiper做轮播图时,轮播效果虽然没问题,但只显示第一张,后面的图片...

0 273
JS控制输入字数的两个方案
JS控制输入字数的两个方案

我们在文章输入框中经常有用到字数控制,但字数控制有两种方案,一种是字母/空...

0 290
js判断windows操作系统还是mac os系统
js判断windows操作系统还是mac os系统

网站日常访客主要是windows和mac os两种操作系统,如果网站提供资源下载,则需...

0 1507
js网站视频播放器ckplayer和dplayer优缺点分析
js网站视频播放器ckplayer和dplayer优缺点分析

dplayer和ckplayer都是非常流行的web视频播放器,二者都占有相当大的用户市场...

0 1297
jQuery怎样给图片添加默认域名?
jQuery怎样给图片添加默认域名?

在很多网站中,图片的默认路径是相对于根目录的绝对路径,如果是其他站点引用,则...

0 332
随机JS/JQuery开发教程
禁止指定城市/省份IP访问JS代码
禁止指定城市/省份IP访问JS代码

对于小部分站点而言,需要禁止一些地区访问达到安全的目的。那么,怎样通过JS禁...

7 928
给网站加一个复制提示窗口JS代码
给网站加一个复制提示窗口JS代码

给网站加一个复制提示窗口JS代码,复制网站内容就会弹出提示框...

12 383
JS代码解除网页右键限制
JS代码解除网页右键限制

JS解除右键限制方法一...

11 311
本地储存window.localStorage使用方法
本地储存window.localStorage使用方法

浏览器本地储存用window.localStorage方法来完成,window.localStorage分JS原...

15 233
JS年月日星期早中午时间代码
JS年月日星期早中午时间代码

JS年月日星期早中午时间代码,精准像素后台自动问候时间代码,完美简单。...

0 285
JS年月日时分秒实时动态显示代码
JS年月日时分秒实时动态显示代码

JS年月日时分秒实时动态显示代码,每秒自动刷新一次。...

3 256
JS开发本站已运行时间脚本
JS开发本站已运行时间脚本

通过当前时间与站点创建时间进行对比,动态显示本站已运行时间。...

8 275
原生JS控制元素显示隐藏代码
原生JS控制元素显示隐藏代码

原生JS控制元素显示隐藏代码,这里就不分享其他的代码了,以免小白看晕了。...

8 251
客服QQ:341553759
点击咨询 常见问题 >
官方交流群:90432500
点击加入