Mobile Web:判断是何种移动设备？判断是横屏还是竖屏？
1.[Mobile Web] ViewPort
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,
user-scalable=no"/>
其中：
width - viewport的宽度
height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放
2.[Mobile Web] Web中如何分辨移动设备?（iPad、iPhone、Android）
第一种， Javascript
var deviceAgent = navigator.userAgent.toLowerCase();
var agentID = deviceAgent.match(/(iphone|ipod|ipad|android)/);
if(agentID.indexOf("iphone")>=0){
alert("iphone");
}
if(agentID.indexOf("ipod")>=0){
alert("ipod");
}
if(agentID.indexOf("ipad")>=0){
alert("ipad");
}
if(agentID.indexOf("android")>=0){
alert("android");
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
</style>
<script type="text/javascript">
function initialize() {
var useragent = navigator.userAgent;
if (useragent.indexOf('iPhone') != -1) {
alert("iPhone");
} else if(useragent.indexOf('iPad') != -1 ) {
alert("iPad");
} else if(useragent.indexOf('Android') != -1 ) {
alert("Android");
} else {
alert("其他平台");
}
}
</script>
</head>
<body onload="initialize()">
</body>
</html>
第二种 Java：
Enumeration typestr = request.getHeaderNames();
String s1 = request.getHeader("user-agent");
if(s1.contains("Android")) {
System.out.println("Android移动客户端");
} else if(s1.contains("iPhone")) {
System.out.println("iPhone移动客户端");
} else if(s1.contains("iPad")) {
System.out.println("iPad客户端");
} else {
System.out.println("其他客户端");
}
整个页面 index.jsp:
<span style="font-family:Times New Roman;"><%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="shortcut icon" href="favicon.ico">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
Enumeration typestr = request.getHeaderNames();
String s1 = request.getHeader("user-agent");
if(s1.contains("Android")) {
System.out.println("Android移动客户端");
} else if(s1.contains("iPhone")) {
System.out.println("iPhone移动客户端");
} else if(s1.contains("iPad")) {
System.out.println("iPad客户端");
} else {
System.out.println("其他客户端");
}
%>
</body>
</html></span>
这两种方法测试下来，一般情况下可以满足需要，遇到像UC浏览器这些第三方浏览器，可能就不准了！
3.[Mobile Web] JQuery判断Ipad、IPhone、Android是横屏还是竖屏(Window.Orientation实现)
在ipad、iphone网页开发中，我们很可能需要判断是横屏或者竖屏。下面就来介绍如何用 jQuery 判断iPad、iPhone、Android是横屏还是竖屏的方法。
代码如下：
function orient() {
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(){
orient();
});
//用户变化屏幕方向时调用
$(window).bind( 'orientationchange', function(e){
orient();
});
屏幕方向对应的window.orientation值：
ipad： 90 或 -90 横屏
ipad： 0 或180 竖屏
Andriod：0 或180 横屏
Andriod： 90 或 -90 竖屏
4.[Mobile Web] 智能手机的屏幕一般的长宽比例
一般有16:9和16:10两种。
16:9比如LG 2X、LG LTE等，分辨率为800*480、1280*720等；
16:10比如iphone4、iphone4S、魅族M9、魅族MX等，分辨率为960*540。
我用的是16:9的LG LTE，这种比例好处是看电影比较好，一般的16:9电影可以满屏全比例播放；缺点就是没有16:10的手机看上去好看，会显得比较长一些。