对手持设备、iPhone 和浏览器的 CSS 支持答案

【问题标题】：CSS support for handheld, iPhone AND browsers对手持设备、iPhone 和浏览器的 CSS 支持
【发布时间】：2011-07-28 22:55:49
【问题描述】：

我的 index.xhtml 中有以下内容

style type="text/css" media="screen and (min-width: 500px)" @import "样式/index.css"; /风格 style type="text/css" media="screen and (max-width: 500px)" @import "style/portable.css"; /风格样式类型=“文本/css”媒体=“手持” @import "style/handheld.css"; /风格

它在 Opera、Opera-Mini、iPhone 和一堆手持设备（N70、摩托罗拉）上运行良好）但它拒绝与 Konqueror 和 Firefox 一起工作。我该如何解决？（我想将 CSS 保存在单独的文件中，并且我不热衷于在 @media screen {} 中包含/嵌入大量 CSS。我也不想使用链接，因为我们使用的是样式在其他页面）

【问题讨论】：

标签： html css mobile-website

【解决方案1】：

期待更多失败。如果您不只针对现代手机，请忘记 css 媒体查询。您可能需要实施服务器端解决方案来了解设备的功能和屏幕

【讨论】：

谢谢，我将不得不使用 perl 或使用 .htaccess 做一些事情

【解决方案2】：

我看不出使用<link ...> 有什么不同。 @import 也发送请求。

<link media="only screen and (min-width: 500px)" href="style/index.css" />

【讨论】：

我对链接的另一个问题是，如果我这样做，它在 FF 中不起作用：link rel="stylesheet" media="only screen" href="style/index.css" / OR链接 rel="stylesheet" media="only screen and (min-width: 500px)" href="style/index.css" / [[media="screen" 有效]] 我正在使用 FF (IceWeasel - Linux ) Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.19) Gecko/20101Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.19) Gecko/2010120923 Iceweasel/ 3.0.6 (Debian-3.0.6-3)20923 Iceweasel/3.0.6 (Debian-3.0.6-3)

【解决方案3】：

这种方法允许您为不理解媒体查询的旧移动设备提供基本样式，然后为可以理解的智能手机、平板电脑和桌面浏览器添加更高级的 CSS。

<link rel="stylesheet" href="css/styles-base.css" />
<!-- for all devices; includes any base ("reset") styles required  -->

<link rel="stylesheet" media="only handheld and (min-width: 300px), only screen and (min-width: 300px)" href="css/styles-modern-300.css" />
<!-- for all modern devices, including "smartphones" -->

<link rel="stylesheet" media="only screen and (min-width: 740px)" href="css/styles-modern-740px.css" />
<!-- for all modern devices with "tablet-sized" and larger viewports (including iPad) -->

<link rel="stylesheet" media="only screen and (min-width: 1000px)" href="css/styles-modern-1000px.css" />
<!-- for all modern devices with "desktop-sized" and larger viewports -->

<link rel="stylesheet" media="only screen and (min-width: 1200px)" href="css/styles-modern-1200px.css" />
<!-- for all modern devices with "larger desktop-sized" viewports -->

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=3.0;">

我想说，如果您想为手机提供样式支持，那么对于现代设备的额外少量 HTTP 请求是您最不必担心的。

你也可以使用这个jQuery Plugin to help IE along with media queries。

【讨论】：