JS判断手机横竖屏
在移动端开发时,有时候需要判断手机的横竖屏,那么就需要用到window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态。
屏幕方向对应的window.orientation值:
ipad或iPhone: 90 或 -90 横屏
ipad或iPhone: 0 或180 竖屏
Andriod:0 或180 横屏
Andriod: 90 或 -90 竖屏
使用 jQuery 判断iPad、iPhone、Android是横屏还是竖屏的方法
function direction() {
if (window.orientation == 90 || window.orientation == -90) {
//ipad、iphone竖屏;Andriod横屏
$("body").attr("class", "landscape");
orientation = 'landscape';
return false;
}
else if (window.orientation == 0 || window.orientation == 180) {
//ipad、iphone横屏;Andriod竖屏
$("body").attr("class", "portrait");
orientation = 'portrait';
return false;
}
}
//页面加载时调用
$(function(){
direction();
});
//用户变化屏幕方向时调用
$(window).on( 'orientationchange', function(e){
direction();
});
JS判断手机横竖屏的更多相关文章
- js 判断手机横竖屏的实现方法(不依赖任何其他库)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- zepto判断手机横竖屏
var CheckOrientation = (function(){ var win = $( window ), get_orientation, last_orientation, initia ...
- CSS3(@media)判断手机横竖屏
@media all and (orientation : landscape) { h2{color:red;}/*横屏时字体红色*/ } @media all and (orientation : ...
- js判断手机浏览器是横屏or竖屏
移动端的浏览器一般都支持window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态. 从而根据实际需求而执行相应的程序.通过添加监听事件onorientationc ...
- js判断手机 横屏模式
js判断手机 横屏模式 方法名称:orientation 实例: if(window.orientation!=0){ var obj=document.getElementById('orienta ...
- js判断手机浏览器操作系统和微信浏览器的方法
做手机端的前端开发,少不了对手机平台的判断.如,对于app下载,就要判断在Android平台下就显示Android下载提示:在iOS平台下就显示iOS下载提示. 今天就为大家介绍一下用js判断手机客户 ...
- H5 手机横竖屏判读
$.fn.screenCheck = function() { var pDiv = $('<div></div>'); pDiv.addClass("screenC ...
- js判断手机的横竖屏调整样式
在移动端,我们经常遇到横竖屏的问题,所以我们改如何判断或针对横竖屏来写代码呢.首先需要在head中加入如下代码: <meta name="viewport" content= ...
- Javascript 判断网页横竖屏
本篇文章由:http://xinpure.com/javascript-to-determine-page-anyway-screen/ Html5 流行至今,自适应的网站已经多如牛毛,但是横竖屏的切 ...
随机推荐
- Modbus协议学习笔记
之前也有写过基于 Modbus 通讯协议的控制远程监控程序,但是由于当时时间赶.人手少(软硬件前后台都是在下一人
- vue父子组件通信(prop)
先定义子组件,注册prop接收父组件传递的值 <template> <div> <div>{{message}}(子组件)</div> </div ...
- robotframe 学习笔记1
在robot framework中,通过 Set variable关键字来定义变量 连接对象: 通过Catenate关键字可以连接多个信息 加上"SEPARATOR=",可以对多个 ...
- tomcat入门(一)几种常见的使用tomcat部署项目的方式
1.常规方式部署 直接把web项目复制到tomcat安装目录下的%Tomcat_Home%/webapps/{web项目} 2.使用控制台进行部署 若一个web应用结构为D:\workspace\We ...
- Kudu版本升级(官网推荐的步骤)(Upgrade from a Previous Version of Kudu)
不多说,直接上干货! http://kudu.apache.org/docs/installation.html#sles_from_source
- ubuntu下安装录屏软件
sudo add-apt-repository ppa:maarten-baert/simplescreenrecorder sudo apt-get update sudo apt-get inst ...
- 测试阿里云1核2g轻量级服务器的吞吐量
使用jmeter对部署的dbshop发起请求,单线程5000次请求 面板为宝塔界面 吞吐量大概在每秒48个请求左右.可以看出阿里云1核2g服务器其实并不能进行实战,只是新手练手而已. 阿里云另一种ec ...
- 使用cookie的注意事项
一.什么是cookie? Cookie(复数形态Cookies),中文名称为小型文本文件或小甜饼[1],指某些网站为了辨别用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密) ...
- Js获取移动设备分辨率
在<head>中引入 <meta name="viewport" content="width=device-width, initial-scale ...
- tck/tl 以及expect脚本
最近有用到,利用expcet脚本自动登录到远程服务器并提权执行脚本. 搜集的知识如下: tcl/tk参考——列表操作lindex expect脚本解释 代码如下 #!/usr/bin/expect - ...