三种检测iPhone/iPad设备方向的方法_javascript技巧

使用meta tag "viewport"

viewport标签包含如下属性:

 

为了能自动探测并适配到屏幕宽度,应该使用device-with而不是设定一个固定值,另外为了避免用户缩放导致界面超出屏幕,需要设置maximum-scale,

复制代码 代码如下:

<meta name="viewport" content="width=device-width, maximum-scale=1.0" />

使用javascript脚本

下面的脚本通过检测屏幕宽度来检测方向并调整方向:

复制代码 代码如下:

<script type="text/javascript">
var updateLayout = function() {
if (window.innerWidth != currentWidth) {
currentWidth = window.innerWidth;
var orient = (currentWidth == 320) ? "profile" : "landscape";
document.body.setAttribute("orient", orient);
window.scrollTo(0, 1);
}
};

iPhone.DomLoad(updateLayout);
setInterval(updateLayout, 400);
</script>

上述脚本可放在head部分

使用CSS

使用CSS的media query:

复制代码 代码如下:

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

时间: 2024-11-01 04:45:32

三种检测iPhone/iPad设备方向的方法_javascript技巧的相关文章

谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法_javascript技巧

发请求有两种方式,一种是用ajax,另一种是用form提交,默认的form提交如果不做处理的话,会使页面重定向.以一个简单的demo做说明:      html如下所示,请求的路径action为"upload",其它的不做任何处理: <form method="POST" action="upload" enctype="multipart/form-data"> 名字 <input type="t

比较简单实用的使用正则三种版本的js去空格处理方法_javascript技巧

分别去字符串前后,左边,右边空格  复制代码 代码如下: String.prototype.trim = function(){ return this.replace(/^\s+|\s+$/g,"")}   String.prototype.ltrim = function(){ return this.replace(/^\s+/g,"")}   String.prototype.rtrim = function(){ return this.replace(/

JS用斜率判断鼠标进入DIV四个方向的方法_javascript技巧

网上大部分判断鼠标移入div移入移出都是使用一下方法: 这个方法确实十分奇特,使用起来十分方便. 后来自己看了一些文章,看到有另一种以斜率的方法来判断鼠标的移动方向. 上图是此方法的示意图,以浏览器左上角做原点,水平轴作为x轴,往右为正:竖直轴作为y轴,向上为正. 中间的div的左上角坐标(x1,y1),右下角坐标(x2,y2),中心点的坐标(x0,y0). 设如图两点的斜率为k(k<0),关于x轴对称的斜率为-k. 另外鼠标刚移入时,鼠标的坐标设为(x,y): window.onload =

js实现表单检测及表单提示的方法_javascript技巧

本文实例讲述了js实现表单检测及表单提示的方法.分享给大家供大家参考.具体如下: 这是个实用的表单判断以及表单提示效果,如果点击需要输入文字的时候,提示就会跑出来,提示框的形状比较个性化,有一个三角符号指向输入框,有两张图片需要下载. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-table-check-form-tips-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM

使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法_javascript技巧

公司自己内部的程序,通过调用外部协议来正常使用,但外部协议必须配合一个客户端才可以,所以想通过js来判断是否安装了客户端,如果未安装,跳转到下载的地址,就类似网上一些迅雷.快车下载链接.查了查方法,实现方法如下: 复制代码 代码如下: <script type="text/javascript">function checkClient(obj){   try{       var a = new ActiveXObject("suncloud.app"

两种JS实现屏蔽鼠标右键的方法_javascript技巧

JS屏蔽鼠标右键的两种方法,比较常用的一个JS小功能,用上这个代码后,浏览者在访问你网页的时候就不能点击右键了,点了也不会弹出右键菜单,本功能最好不要用的太多哦,有时候用户会反感的. 代码如下: <html> <head> <title>屏蔽鼠标右键</title> </head> <body oncontextmenu=self.event.returnvalue=false> 第一种方法:在body标签里加上oncontextme

js中几种去掉字串左右空格的方法_javascript技巧

//recon 的思路: //------------- //去掉字串左边的空格 function ltrim(str) { if (str.charat(0) == " ") {   //如果字串左边第一个字符为空格   str = str.slice(1);//将空格从字串中去掉   //这一句也可改成 str = str.substring(1, str.length);   str = ltrim(str);   //递归调用 } return str; } //去掉字串右边的

【Xamarin挖墙脚系列:现有IPhone/IPad 设备尺寸】

原文:[Xamarin挖墙脚系列:现有IPhone/IPad 设备尺寸]  

三种类型的DNS攻击以及应对方法

本文讲的是 :   三种类型的DNS攻击以及应对方法 ,   [IT168 方案] DNS服务器能够将IP地址翻译成域名,这就是为什么你可以在浏览器输入cnw.com.cn来访问我们的网站,而不需要记住IP地址. 当DNS被攻击时,可能发生各种情况,不过,攻击者经常使用两种方法来利用被攻击的DNS服务器.首先,攻击者可以做的第一件事情是重定向所有入站流量到他们选择的服务器.这使他们能够发动更多的攻击,或者收集包含敏感信息的流量日志. 攻击者可以做的第二件事情是捕捉所有入站电子邮件.更重要的是,第