PHP判断手机横向,H5横竖屏检测的方法
这篇文章主要为大家详细介绍了更靠谱的横竖屏检测方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
前不久,做了一个H5项目,需要在横竖屏变化时,做一些处理。毫无疑问,需要使用orientationchange来监听横竖屏的变化。
方案一:// 监听 orientation changes
window.addEventListener("orientationchange", function(event) {
// 根据event.orientation|screen.orientation.angle等于0|180、90|-90度来判断横竖屏
}, false);
代码添加上后,就各种兼容性问题。这里兼容性问题出现在两个地方:
orientationchange
event.orientation|screen.orientation.angle
如下是orientationchange事件的兼容性:
如下是screen.orientation的兼容性:
方案二:
上述方案不行,只能另行他法了。google一下,了解到可以通过resize配合(window.inner/outerWidth, window.inner/outerHeight)来实现:window.addEventListener("resize", function(event) {
var orientation=(window.innerWidth > window.innerHeight)? "landscape":"portrait";
if(oritentation === 'portrait'){
// do something ……
} else {
// do something else ……
}
}, false);
这种方案基本满足大部分项目的需求,但是还是有些不足之处:
只要window的size变化,就会不断触发触发resize事件。可以使用setTimeout来优化一下
如果有多个地方需要监听横竖屏,就需要注册多个window.addEventListener("resize", function(event) {……})。能不能通过订阅与发布模式来改进一下,只注册一个resize负责监听横竖屏变化,只要横竖发生变化就发布通知订阅的对象。其他需要监听横竖屏的地方只需订阅一下即可。
关键代码如下:var resizeCB = function(){
if(win.innerWidth > win.innerHeight){//初始化判断
meta.init = 'landscape';
meta.current = 'landscape';
} else {
meta.init = 'portrait';
meta.current = 'portrait';
}
return function(){
if(win.innerWidth > win.innerHeight){
if(meta.current !== 'landscape'){
meta.current = 'landscape';
event.trigger('__orientationChange__', meta);
}
} else {
if(meta.current !== 'portrait'){
meta.current = 'portrait';
event.trigger('__orientationChange__', meta);
}
}
}
}();
完整代码猛击这里
方案三:
不过个人觉得通过window.innerWidth > window.innerHeight来实现的是一种伪检测,有点不可靠。 可不可以通过浏览器来实现检测?如基于CSS3@media媒体查询来实现。
如下@media兼容性:
如上上图所示,移动端浏览器都支持CSS3 media。
实现思路:
创建包含标识横竖屏状态的特定css样式
通过JS向页面中注入CSS代码
resize回调函数中获取横竖屏的状态
这里我选择的节点font-family作为检测样式属性。理由如下:
选择主要为了避免reflow和repaint
选择font-family样式,主要是因为font-family有如下特性:优先使用排在前面的字体。
如果找不到该种字体,或者该种字体不包括所要渲染的文字,则使用下一种字体。
如果所列出的字体,都无法满足需要,则让操作系统自行决定使用哪种字体。
这样我们就可以指定特定标识来标识横竖屏的状态,不过需要将指定的标识放置在其他字体的前面,这样就不会引起hmtl字体的变化。
关键代码如下:// callback
var resizeCB = function() {
var hstyle = win.getComputedStyle(html, null),
ffstr = hstyle['font-family'],
pstr = "portrait, " + ffstr,
lstr = "landscape, " + ffstr,
// 拼接css
cssstr = '@media (orientation: portrait) { .orientation{font-family:' + pstr + ';} } @media (orientation: landscape) { .orientation{font-family:' + lstr + ';}}';
// 载入样式
loadStyleString(cssstr);
// 添加类
html.className = 'orientation' + html.className;
if (hstyle['font-family'] === pstr) { //初始化判断
meta.init = 'portrait';
meta.current = 'portrait';
} else {
meta.init = 'landscape';
meta.current = 'landscape';
}
return function() {
if (hstyle['font-family'] === pstr) {
if (meta.current !== 'portrait') {
meta.current = 'portrait';
event.trigger('__orientationChange__', meta);
}
} else {
if (meta.current !== 'landscape') {
meta.current = 'landscape';
event.trigger('__orientationChange__', meta);
}
}
}
}();
完整代码猛击这里
测试效果
portrait效果:
landscape效果:
方案四:
可以再改进一下,在支持orientationchange时,就使用原生的orientationchange,不支持则使用方案三。
关键代码如下:// 是否支持orientationchange事件
var isOrientation = ('orientation' in window && 'onorientationchange' in window);
// callback
var orientationCB = function(e) {
if (win.orientation === 180 || win.orientation === 0) {
meta.init = 'portrait';
meta.current = 'portrait';
}
if (win.orientation === 90 || win.orientation === -90) {
meta.init = 'landscape';
meta.current = 'landscape';
}
return function() {
if (win.orientation === 180 || win.orientation === 0) {
meta.current = 'portrait';
}
if (win.orientation === 90 || win.orientation === -90) {
meta.current = 'landscape';
}
event.trigger(eventType, meta);
}
};
var callback = isOrientation ? orientationCB() : (function() {
resizeCB();
return function() {
timer && win.clearTimeout(timer);
timer = win.setTimeout(resizeCB, 300);
}
})();
// 监听
win.addEventListener(isOrientation ? eventType : 'resize', callback, false);
完整代码猛击这里
方案五:
目前,上述几种方案都是通过自定制的订阅与发布事件模式来实现的。这里可以基于浏览器的事件机制,来模拟orientationchange。即对orientationchange的不兼容进行修复。
关键代码如下:var eventType = 'orientationchange';
// 触发原生orientationchange
var fire = function() {
var e;
if (document.createEvent) {
e = document.createEvent('HTMLEvents');
e.initEvent(eventType, true, false);
win.dispatchEvent(e);
} else {
e = document.createEventObject();
e.eventType = eventType;
if (win[eventType]) {
win[eventType]();
} else if (win['on' + eventType]) {
win['on' + eventType]();
} else {
win.fireEvent(eventType, e);
}
}
}
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
PHP判断手机横向,H5横竖屏检测的方法相关推荐
- android 判断miui版本,Android判断手机是否是小米MIUI系统的方法
易采站长站为您分析Android判断手机是否是小米MIUI系统的方法的相关资料,需要的朋友可以参考下 废话不多说了,直接给大家贴代码了: 具体代码如下所示: public class MIUIUtil ...
- linux下浏览器如何登录微信,js判断手机浏览器操作系统和微信浏览器的方法
今天就为大家介绍一下用js判断手机客户端平台及系统平台的方法: //手机端判断各个平台浏览器及操作系统平台 function checkPlatform(){ if(/android/i.test(n ...
- html5 判断横竖屏,前端js横竖屏检测的4种方案
最近有人提需求,产品要适配横竖屏,这就令人头秃了呀. 这在家办公也不让闲着点.虽然说需求提出来了,但是我们身为一个前端er,还是要有自己的想法呀,我们要统计一波数据看看到底有多少人在横屏使用我们的产品 ...
- js 判断手机横竖屏的实现方法(不依赖任何其他库)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- Android App 手机兼容平板横竖屏切换
Android App兼容平板的开发.希望在手机上是竖屏显示,然后在平板上是横竖切换. /*** 判断是否平板设备* @param context* @return true:平板,false:手机* ...
- uniapp 判断页面是否是横竖屏,解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题
如果res.deviceOrientation 等于landscape 的话是竖屏,portrait则是横屏.因为用户每旋转一次屏幕就会触发里面的onShow钩子,因此在页面显示或横竖屏变化都会触发这 ...
- Android 适配刘海屏之 判断手机是否是刘海屏
话不多说 直接上代码 判断vivo是否有刘海屏 /*** 判断vivo是否有刘海屏* https://swsdl.vivo.com.cn/appstore/developer/uploadfile/2 ...
- H5横竖屏适配代码,强制横屏
1.强制横屏代码,检测用户屏幕方向,竖屏时提示用户将屏幕翻转 <style>@media all and (orientation: portrait) {html, body {posi ...
- 很多人还不知道中视频计划手机上发布多端横竖屏视频的方法
如果说你刚开始接触中视频,你必须要学会的小知识. 横屏视频是16:9的视频,一般是手机横向拍摄的视频. 上传这样的视频有两种方法.第一种是需要用到电脑,第二种就是我今天要分享的这种,没有电脑,我们用手 ...
最新文章
- 基于 Web 的 Linux 终端 WebTerminal
- vb 6.0服务器组件选哪个,VB 6.0包括几种版本?分别是什么?
- Python初识面向对象
- freemarker模板最小案例实现
- JZOJ 5923. 【NOIP2018模拟10.23】Bomb
- 别用symbolicatecrash来解析crash Log了
- 全网最细之抽象类讲解
- IOS之Objective-C学习 ARC下的单例模式
- JavaScript程序开发(十四)—函数声明与函数表达式
- 【华为云技术分享】浅谈产品模型(Profile)在程序设计中的作用
- 提高MySQL数据库查询效率的几个技巧(转载)
- matlab plot颜色
- 普联(TP-LINK)的无线网卡在Linux下如何使用
- UitableView 动态高度的优化 提高寻星效率
- 【LeetCode】第934题——最短的桥(难度:中等)
- 跳过selenium检测爬取淘宝直通车
- Golang http server 跨域问题与解决办法
- Dreaming to Distill Data-free Knowledge Transfer via DeepInversion
- 美德乐吸奶器怎么样?
- WMS系统数据分析—库存周转率分析
热门文章
- KDD2021 | 推荐系统中利用深度哈希方法学习类别特征表示
- 【报告分享】2021年小红书美妆护肤洞察报告.pdf(附下载链接)
- 科研必备?年入百万?来看这份知乎大佬的图形学书籍清单!
- 原生xgboost与sklearn里的xgboost
- python 中的__future__模块
- 【论文】基于特定实体的文本情感分类总结(PART II)
- delphi10android保存数据,DELPHI XE5 Android – SDCard的SAVE / LOAD文件
- 面试准备每日五题:C++(六)——CC++、staticconstextern、sizeof strlen、指针引用、数组指针指针数组函数指针
- C++面向对象高级编程(上) 第一周 侯捷
- 源生php怎么打印,PHP如何实现云打印