js判断手机的横竖屏调整样式
在移动端,我们经常遇到横竖屏的问题,所以我们改如何判断或针对横竖屏来写代码呢。首先需要在head中加入如下代码:
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
针对上面的viewport标签有如下说明:
1).content 中的width指的是虚拟窗口的宽度。
2).user-scalable=no 就一定可以保证页面不能缩放吗?NO,有些浏览器不吃这一套,这一招就是minimum-scale=1.0,maximum-scale=1.0最大与最小缩放比都设为1.0就可以了。
3).initial-scale=1.0 初始缩放比例受user-scalable控制吗?不一定,有些浏览器会将user-scalable理解为用户手动缩放,如果user-scalable=no,initial-scale将无法生效。
4).手机页面可以触摸移动,但是如果有禁止此操作,就是页面宽度等于屏幕宽度是页面正好适应屏幕才可以保证页面不能移动。
5).如果页面是经过缩小适应屏幕宽度的,会出现一个问题,当文本框被激活(获取焦点)时,页面会放大至原来的存。
一:css判断横屏竖屏
写在同一个css中
css代码:
@media screen and (orientation:portrait){
//竖屏css
}
@media screen and (orientation:landscape){
//横屏css
}
注:css3媒体查询orientation
语法:orientation : portrait | landscape
取值: portrait:指定输出设备中的页面可见区域高度大于或等于宽度 //竖屏模式
landscape:除portrait值情况外,都是landsscape
参考:http://www.w3chtml.com/css3/properties/madia-queries/orientation.html
分开写在2个css中
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"/> //竖屏
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"/> //横屏
二:js判断横竖屏
window.addEventListener("onorientationchange" in window? "orientationchange":"resize",function(){
setTimeout(function(){
if(window.orientation===0 || window.orientation===180){
alert('竖屏模式')
}
if(window.orientation===90 || window.orientation===-90){
alert("横屏模式")
}
},300)
},false);
注:orientationchange的兼容性
移动端webapp监测屏幕旋转时时常用onorientationchange事件,用此事件获取改变后的屏幕尺寸需要注意:
1).iphone,可立即获取改变后的屏幕尺寸。
2).android,获取的尺寸是改变前的。需要设置setTimeout在一段时间后再获取。iScroll4是200ms,建议设成300ms.
转载于:https://www.cnblogs.com/liuqingxia/p/7569746.html
js判断手机的横竖屏调整样式相关推荐
- android判断手机屏幕横竖屏
在一个Activity显示中判断当前屏幕横竖屏情况有几种方法: Configuration configuration = getResources().getConfiguration(); if ...
- 使用JavaScript判断手机的横竖屏
横竖屏的需求由来 横竖屏问题主要来源于移动端 iPhone.Android.以及 iPad这些设备中.有时候,我们的前端网页不仅要求在竖屏的情况下能够完美的展示,而且要求我们在横屏的情况下也有不错的网 ...
- js判断手机浏览器屏幕方向
/* js判断手机浏览器屏幕方向*/var direction = {__getOrientation: function () {if (window.orientation == 0 || win ...
- linux下浏览器如何登录微信,js判断手机浏览器操作系统和微信浏览器的方法
今天就为大家介绍一下用js判断手机客户端平台及系统平台的方法: //手机端判断各个平台浏览器及操作系统平台 function checkPlatform(){ if(/android/i.test(n ...
- js判断手机上是否安装某APP
前两天,产品给我又给我提了一个需求,就是给我看了一下人家的功能,说我们也想要这个功能,于是,我就开始实现这个功能了..... js判断手机上是否安装某APP,如果有的话直接打开App,否则打开App ...
- js 判断手机横竖屏的实现方法(不依赖任何其他库)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- JS判断手机浏览器是横屏or竖屏
移动端的浏览器一般都支持window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态. 从而根据实际需求而执行相应的程序. 通过添加监听事件onorientation ...
- html5 判断是否安装app,js判断手机上是否安装app
通过js进行判断,判断手机上是否安装某一app,因为js并不能操作手机原生的API,所以它判断的方法只是通过动态生成iframe,用它打开app,看能不能打开,通过这个时间进行判断,下面有两段代码: ...
- 解决Android手机 屏幕横竖屏切换
Android中当屏幕横竖屏切换时,Activity的生命周期是重新加载(说明当前的Activity给销毁了,但又重新执行加载),怎么使屏幕横竖屏切换时,当前的Activity不销毁呢? 1. 在An ...
最新文章
- 64位系统上使用*** Client端
- 点云分割 PointCloudSegmentation测试笔记
- 笔记-信息系统开发基础-信息系统开发模型
- 【SSL】java keytool工具创建自己的(localhost)(JKS)证书库
- 彻底理解JVM常考题之分级引用模型
- 前端学习(3038):vue+element今日头条管理-使用请求拦截器
- spark streaming限制吞吐
- kafka和mqtt的区别和联系
- 两个辅助指针变量挖字符串
- WIN10的永久杜比音效的安装(2021)
- Spring框架爆RCE 0day漏洞的临时解决方案
- IDA反汇编工具使用详解
- logistic回归的应用
- html常用标签梳理
- Nmap命令详解(全)
- python基于pingouin包进行统计分析:使用tost函数执行独立双样本双单侧检验(TOST)、以dataframe的形式输出分析结果(包含p值、自由度、bound等)
- 如何提拔骨干及挑选接班人
- form表单往后台传日期
- stm32F407时钟配置
- Polkadot学习概念总结
热门文章
- MM采购定价条件记录表
- ipad/ios按钮背景颜色为渐变色?去除iOS按钮渐变色
- Windows 10(Win10) 怎么删除设备和驱动里的CD驱动器
- 51Nod 1677 treecnt
- 【李宏毅】元学习(Meta learning)的概念与步骤
- aisell_EasyPOI 数据导入导出
- TF卡里删掉文件后内存没变大_双11,TF卡,SD卡,读卡器如何选,看这篇就够了...
- matlab导入表格画图,matlab从excel表格导入数据画图-在matlab上如何导入excel表格然后画图...
- 在WINDOWS运行框中能够输入的命令有多少?(转)
- 聊天室登录php,聊天室技术(二)-- 登录_PHP