CSS 支持手持设备、iPhone 和浏览器

发布于 2024-10-29 17:59:12 字数 510 浏览 1 评论 0原文

我的index.xhtml中有以下内容，

  style type="text/css" media="screen and (min-width: 500px)"
    @import "style/index.css";
  /style
  style type="text/css" media="screen and (max-width: 500px)"
    @import "style/portable.css";
  /style
  style type="text/css" media="handheld"
    @import "style/handheld.css";
  /style

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

原文

I have the following in my index.xhtml

  style type="text/css" media="screen and (min-width: 500px)"
    @import "style/index.css";
  /style
  style type="text/css" media="screen and (max-width: 500px)"
    @import "style/portable.css";
  /style
  style type="text/css" media="handheld"
    @import "style/handheld.css";
  /style

It works great in Opera, Opera-Mini, iPhone and a bunch of handhelds (N70, Motorola)) BUT it refuses to work with Konqueror and Firefox. How do i fix this? (I want to keep the CSS in separate files, and I'm not keen on enclosing/embedding huge chunks of CSS within @media screen {}. I'd also prefer to not go with link because style is what we've used in other pages)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

樱娆 2024-11-05 17:59:12

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

回复收藏 0 原文

小鸟爱天空丶 2024-11-05 17:59:12

我没有看到使用的区别。 @import 也会发送请求。

回复收藏 0 原文

蓝颜夕 2024-11-05 17:59:12

这种方法允许您为不支持媒体查询的旧移动设备提供基本样式，然后为支持媒体查询的智能手机、平板电脑和桌面浏览器添加更高级的 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 插件来帮助 IE 进行媒体查询。

This approach allows you to serve base styles to old mobile devices that don't understand media queries and then add more advanced CSS for smartphones, tablets and desktop browsers that do.

<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;">

I would say the extra few HTTP requests for modern devices are the least of your worries if you want to provide styling support to phones.

You can also use this jQuery Plugin to help IE along with media queries.

回复收藏 0 原文

~没有更多了~