网站移动兼容性答案

【问题标题】：website mobile compatibility网站移动兼容性
【发布时间】：2011-04-12 02:36:50
【问题描述】：

如何制作既兼容桌面浏览器又兼容移动浏览器的网站？

【问题讨论】：

标签： java iphone android web

【解决方案1】：

我假设你的意思是兼容。如果我对你想要达到的目标有更多了解，我可能会提供更多帮助。

基本上，由于移动设备种类繁多（其中大多数具有不同的浏览器功能、屏幕分辨率、尺寸等），您永远无法让网站与所有移动设备完全兼容。有些设备总会有问题。

然而，一个可能的解决方案是为不同类型的手机创建不同版本的网站（例如，用于 iphone 的版本、用于诺基亚的版本、用于黑莓的版本等），并使用类似 PHP & WURFL 检测移动浏览器类型并加载相应版本的网站。

我过去曾使用 PHP & WURFL 来检测是否正在使用桌面或移动浏览器，并加载适当的移动或桌面网站。

【讨论】：

【解决方案2】：

桌面和移动设备的替代 CSS 文件有诀窍。因此在 HTML 标头中实现：

<head>
<meta name="viewport" content="width=320" />
<link rel="stylesheet" href="mobile.css" type="text/css" media="only screen and (max-device-width: 480px)"/>
<link rel="stylesheet" href="desktop.css" type="text/css" media="screen and (min-device-width: 481px)"/>
<link rel="stylesheet" href="mobile.css" type="text/css" media="handheld"/>
<!--[if IE]>
<link rel="stylesheet" href="desktop.css" media="screen" type="text/css" />
<![endif]-->
</head>

然后，如果您需要移动设备和桌面设备的替代内容，请随意将部分 HTML 设置为在桌面设备上可见并在移动设备上隐藏，反之亦然。

在 iPhone 和 Android 上试用过。请注意，仅在 ref 标记或 CSS 文件中指定“media="handheld"” not 就可以解决问题； iPhone 不认为自己是手持设备。

【讨论】：