Question

我有一个在iPhone上看起来很糟糕但在常规浏览器中很好的网站。我希望能够只为iPhone加载css，并且只为常规浏览器加载其他样式表。我宁愿不使用PHP，但它是一个可用的选项，我想使用标准的方式来调用css：

<link rel="stylesheet" href="index.css"/>

Answer 1

这可以通过CSS媒体查询来完成。这将为具有不超过768像素的屏幕的设备提供移动样式表，并为其他设备提供桌面屏幕截图。

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 768px)" href="mobile.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 768px)" href="desktop.css" />

Answer 2

您正在寻找的是CSS 媒体查询。允许您根据不同的浏览器分辨率/屏幕dpi指定要使用的css规则。您可以在http://www.alistapart.com/articles/responsive-web-design/

了解更多相关信息

Answer 3

如果php是一个选项，你可以做的一件事是安装用户代理处理工具来查找请求来自哪个设备，你可以相应地定制你的网站。

WURLF对我很有用。有开源的MYSQL-PHP库：

TERA-WURFL

如果您不想要并寻找单一解决方案，您可以在css中使用以下内容：

// target small screens (mobile devices or small desktop windows)
@media only screen and (max-width: 480px) {
  /* CSS goes here */
}

/* high resolution screens */
@media (-webkit-min-device-pixel-ratio: 2),
             (min--moz-device-pixel-ratio: 2),
             (min-resolution: 300dpi) {
  header { background-image: url(header-highres.png); }
}

/* low resolution screens */
@media (-webkit-max-device-pixel-ratio: 1.5),
             (max--moz-device-pixel-ratio: 1.5),
             (max-resolution: 299dpi) {
  header { background-image: url(header-lowres.png); }
}

您可以在这篇好文章中了解更多相关信息：

http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript

Answer 4

使用用户代理。

从$_SERVER['HTTP_USER_AGENT']获取字符串，看它是否包含字符串iPhone。如果是，请包含自定义css，否则请包含常规css。

当然，您可以查看iPhone正在使用的实际浏览器，或者决定使用您的自定义css，例如，所有移动设备（您必须枚举）。

但是，如果您想要真正的解决方案，您将需要了解DDR（设备描述存储库）。比我的价值更麻烦，但如果你的项目足够大并且必须保持足够长的时间，为什么不呢。

只适用于iPhone和常规浏览器的CSS？

4 个答案: