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

使用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">

赞 (0)

相关推荐

  • 三种检测iPhone/iPad设备方向的方法

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

    使用meta tag "viewport" viewport标签包含如下属性: 为了能自动探测并适配到屏幕宽度,应该使用device-with而不是设定一个固定值,另外为了避免用户缩放导致界面超出屏幕,需要设置maximum-scale, 复制代码 代码如下: <meta name="viewport" content="width=device-width, maximum-scale=1.0" /> 使用javascript脚本

  • 三种asp.net页面跳转的方法

    第一种方法:response.redirect 这个跳转页面的方法跳转的速度不快,因为它要走2个来回(2次postback),但它可以跳转到任何页面,没有站点页面限制(即可以由雅虎跳到新浪),同时不能跳过登录保护.但速度慢是其最大缺陷!redirect跳转机制:首先是发送一个http请求到客户端,通知需要跳转到新页面,然后客户端在发送跳转请求到服务器端.需要注意的是跳转后内部空间保存的所有数据信息将会丢失,所以需要用到session. 代码如下  using System; using Syst

  • 充分利用ASP.NET的三种缓存提高站点性能的注意方法

    ASP.NET提供三种主要形式的缓存:页面级输出缓存.用户控件级输出缓存(或称为片段缓存)和缓存API. 尽早缓存:经常缓存  您应该在应用程序的每一层都实现缓存.向数据层.业务逻辑层.UI或输出层添加缓存支持.内存现在非常便宜-因此,通过以智能的方式在整个应用程序中实现缓存,可以获得很大的性能提高. 页面级输出缓存 最简单的缓存形式,只是在内存中保留为响应请求而发送的HTML的副本. 要实现页面输出缓存,只要将一条OutputCache指令添加到页面即可. <%@ OutputCache Du

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

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

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

  • 三种取消选中单选框radio的方法

    本文提供了三种取消选中radio的方式,代码示例如下: 本文依赖于jQuery,其中第一种,第二种方式是使用jQuery实现的,第三种方式是基于JS和DOM实现的. <!DOCTYPE HTML> <html> <head> <title>单选按钮取消选中的三种方式</title> <script type="text/javascript" src="http://lib.sinaapp.com/js/jqu

  • 三种Android单击事件onclick的实现方法

    onclick事件的定义方法,分为三种,分别为在xml中进行指定方法:在Actitivy中new出一个OnClickListenner():实现OnClickListener接口三种方式. 代码分别如下: 1. xml指定onclick事件,这种方式比较适用于指定的button,能使java代码相对简化一些: xml文件中: <span style="color:#333333;"><Button android:text="Button03" a

  • 解析jQuery的三种bind/One/Live事件绑定使用方法

    jQuery是 一款优秀的JavaScript框架,在旧版里主要用bind()方法,在新版里又多了两种One(),Live(),下面介绍这几种方法的使用: 1. bind/Unbind在jquery的事件模型中,有两个基本的事件绑 定函数,bind与unbind,这两个函数的含义就是匹配页面元素进行相关事件的处理.比如我们在JS中经常使用到的 onfocus,onblur,onmouseover,onmousedown等事件都可以作为bind的参数进行传递. $("#id").bind

  • Android 三种实现定时器详解及实现方法

    方法一:Handler+Thread package com.xunfang.handerDemo; import android.app.Activity; import android.os.Bundle; import android.os.Handler; import android.os.Message; import android.widget.TextView; /** * handler定时器 * * @author Smalt * */ public class Hande

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

    分别去字符串前后,左边,右边空格  复制代码 代码如下: 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(/

  • 详解Android 检测权限的三种写法

    本文介绍了详解Android 检测权限的三种写法,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 权限检测生效条件: targetSdkVersion 以及 compileSdkVersion 升级到 23 及以上 运行 Android 系统 6.0 及以上 三种检测权限写法: public static boolean checkPermission1(Context context, String[] permissions) { PackageManager p

随机推荐