Mobile Web:判断是何种移动设备？判断是横屏还是竖屏？

最新推荐文章于 2025-08-24 13:41:10 发布

South-Fly

最新推荐文章于 2025-08-24 13:41:10 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

分类专栏：移动开发文章标签：移动设备 mobile web 智能手机 jquery

本文链接：https://blog.youkuaiyun.com/sunlovefly2012/article/details/37570461

移动开发专栏收录该内容

8 篇文章

订阅专栏

本文深入探讨了移动Web开发中的关键概念和技术，包括Viewport设置、设备类型识别、屏幕方向判断及不同屏幕比例的智能手机特性。通过实例展示了如何使用JavaScript和Java识别移动设备类型，并利用jQuery实现对iPad、iPhone和Android设备的横竖屏判断。同时，文章还讨论了常见的屏幕比例及其对用户体验的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.[Mobile Web] ViewPort

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的手机看上去好看，会显得比较长一些。