-2

我正在尝试建立一个响应式网站。我知道我应该从最小到最大工作，从移动到平板到台式机。但我不希望在移动设备上下载桌面图像以节省带宽和时间。我也知道浏览器不会将有关自身的信息发送到服务器，所以我不能使用 php。

简而言之，我需要一种在加载之前使用js来确定要加载哪个css文件的方法。有办法吗？

4

3 回答 3

1

您无法真正阻止使用 JavaScript 下载嵌入的图像。 在您修改 DOM 之前，一些图像将开始下载。

如果关注的是背景图像，则浏览器仅在需要时才请求图像。在以下 CSS 示例中，窄设备仅请求 small.gif，宽设备仅请求 big.gif。

.foo {
    background: url(small.gif);
}

@media (min-width: 800px) {
    .foo {
        background: url(big.gif);
    }
}

查看有关背景图像和移动设备的更多信息：http: //timkadlec.com/2012/04/media-query-asset-downloading-results/

一个常见的误解是，<link />如果设备不需要样式表，在元素中使用媒体查询会阻止样式表的下载，但这是错误的。浏览器请求所有 CSS 文件，包括备用文件，以防浏览器以后需要它们。

<link rel="stylesheet" href="/css/responsive.css" media="screen" title="Responsive" />
<link rel="stylesheet" href="/css/mobile.css" media="(max-width: 800px)" title="Mobile" />
<link rel="stylesheet" href="/css/desktop.css" media="(min-width: 801px)" title="Desktop" />

您可以从 2 个不同设备的访问日志中看到请求了所有 3 个样式表。

Opera 移动模拟器

10.0.0.1 - - [27/May/2013:14:26:53 -0400] "GET / HTTP/1.1" 200 - - "Opera/9.80 (Windows; Opera Mobi/35779; U; en) Presto/2.10.254 Version/12.00"
10.0.0.1 - - [27/May/2013:14:26:53 -0400] "GET /js/menu.js HTTP/1.1" 200 - "http://10.0.0.102:8000/" "Opera/9.80 (Windows; Opera Mobi/35779; U; en) Presto/2.10.254 Version/12.00"
10.0.0.1 - - [27/May/2013:14:26:53 -0400] "GET /photo_420x315.gif HTTP/1.1" 304 0 "http://10.0.0.102:8000/" "Opera/9.80 (Windows; Opera Mobi/35779; U; en) Presto/2.10.254 Version/12.00"
10.0.0.1 - - [27/May/2013:14:26:53 -0400] "GET /uploads/photos/81_230x200.jpg HTTP/1.1" 200 2931 "http://10.0.0.102:8000/" "Opera/9.80 (Windows; Opera Mobi/35779; U; en) Presto/2.10.254 Version/12.00"
10.0.0.1 - - [27/May/2013:14:26:53 -0400] "GET /js/modernizr/2.6.1.custom-input.js HTTP/1.1" 304 0 "http://10.0.0.102:8000/" "Opera/9.80 (Windows; Opera Mobi/35779; U; en) Presto/2.10.254 Version/12.00"
10.0.0.1 - - [27/May/2013:14:26:53 -0400] "GET /js/address_picker.js HTTP/1.1" 304 0 "http://10.0.0.102:8000/" "Opera/9.80 (Windows; Opera Mobi/35779; U; en) Presto/2.10.254 Version/12.00"
10.0.0.1 - - [27/May/2013:14:26:53 -0400] "GET /placeholders/728x90_banner.png HTTP/1.1" 304 0 "http://10.0.0.102:8000/" "Opera/9.80 (Windows; Opera Mobi/35779; U; en) Presto/2.10.254 Version/12.00"
10.0.0.1 - - [27/May/2013:14:26:53 -0400] "GET /uploads/photos/60_230x200.jpg HTTP/1.1" 200 2818 "http://10.0.0.102:8000/" "Opera/9.80 (Windows; Opera Mobi/35779; U; en) Presto/2.10.254 Version/12.00"
10.0.0.1 - - [27/May/2013:14:26:53 -0400] "GET /css/responsive.css HTTP/1.1" 200 - "http://10.0.0.102:8000/" "Opera/9.80 (Windows; Opera Mobi/35779; U; en) Presto/2.10.254 Version/12.00"
10.0.0.1 - - [27/May/2013:14:26:53 -0400] "GET /uploads/photos/119_230x200.jpg HTTP/1.1" 200 3223 "http://10.0.0.102:8000/" "Opera/9.80 (Windows; Opera Mobi/35779; U; en) Presto/2.10.254 Version/12.00"
10.0.0.1 - - [27/May/2013:14:26:53 -0400] "GET /favicon.ico HTTP/1.1" 304 0 "http://10.0.0.102:8000/" "Opera/9.80 (Windows; Opera Mobi/35779; U; en) Presto/2.10.254 Version/12.00"
10.0.0.1 - - [27/May/2013:14:26:53 -0400] "GET /css/desktop.css HTTP/1.1" 200 - "http://10.0.0.102:8000/" "Opera/9.80 (Windows; Opera Mobi/35779; U; en) Presto/2.10.254 Version/12.00"
10.0.0.1 - - [27/May/2013:14:26:53 -0400] "GET /css/mobile.css HTTP/1.1" 200 - "http://10.0.0.102:8000/" "Opera/9.80 (Windows; Opera Mobi/35779; U; en) Presto/2.10.254 Version/12.00"
10.0.0.1 - - [27/May/2013:14:26:53 -0400] "GET /uploads/photos/76_230x200.jpg HTTP/1.1" 200 2907 "http://10.0.0.102:8000/" "Opera/9.80 (Windows; Opera Mobi/35779; U; en) Presto/2.10.254 Version/12.00"
10.0.0.1 - - [27/May/2013:14:26:53 -0400] "GET /js/polyfills/loader.js HTTP/1.1" 304 0 "http://10.0.0.102:8000/" "Opera/9.80 (Windows; Opera Mobi/35779; U; en) Presto/2.10.254 Version/12.00"
10.0.0.1 - - [27/May/2013:14:26:53 -0400] "GET /css/mobile.css HTTP/1.1" 200 - "http://10.0.0.102:8000/" "Opera/9.80 (Windows; Opera Mobi/35779; U; en) Presto/2.10.254 Version/12.00"
10.0.0.1 - - [27/May/2013:14:26:53 -0400] "GET /js/polyfills/details/logifill-details-min.js HTTP/1.1" 304 0 "http://10.0.0.102:8000/" "Opera/9.80 (Windows; Opera Mobi/35779; U; en) Presto/2.10.254 Version/12.00"
10.0.0.1 - - [27/May/2013:14:26:54 -0400] "GET /css/desktop.css HTTP/1.1" 200 - "http://10.0.0.102:8000/" "Opera/9.80 (Windows; Opera Mobi/35779; U; en) Presto/2.10.254 Version/12.00"
10.0.0.1 - - [27/May/2013:14:26:54 -0400] "GET /favicon.ico HTTP/1.1" 304 0 "http://10.0.0.102:8000/" "Opera/9.80 (Windows; Opera Mobi/35779; U; en) Presto/2.10.254 Version/12.00"
10.0.0.1 - - [27/May/2013:14:26:54 -0400] "GET /uploads/photos/119_230x200.jpg HTTP/1.1" 200 3223 "http://10.0.0.102:8000/" "Opera/9.80 (Windows; Opera Mobi/35779; U; en) Presto/2.10.254 Version/12.00"
10.0.0.1 - - [27/May/2013:14:26:55 -0400] "GET / HTTP/1.1" 200 - - "Opera/9.80 (Windows; Opera Mobi/35779; U; en) Presto/2.10.254 Version/12.00"
10.0.0.1 - - [27/May/2013:14:26:55 -0400] "GET /uploads/photos/103_230x200.jpg HTTP/1.1" 200 3368 "http://10.0.0.102:8000/" "Opera/9.80 (Windows; Opera Mobi/35779; U; en) Presto/2.10.254 Version/12.00"

安卓模拟器

10.0.0.1 - - [27/May/2013:14:29:24 -0400] "GET / HTTP/1.1" 200 - - "Mozilla/5.0 (Linux; U; Android 4.1.2; en-us; sdk Build/MASTER) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30"
10.0.0.1 - - [27/May/2013:14:29:26 -0400] "GET /css/responsive.css HTTP/1.1" 200 - "http://10.0.0.102:8000/" "Mozilla/5.0 (Linux; U; Android 4.1.2; en-us; sdk Build/MASTER) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30"
10.0.0.1 - - [27/May/2013:14:29:26 -0400] "GET /js/polyfills/loader.js HTTP/1.1" 200 - "http://10.0.0.102:8000/" "Mozilla/5.0 (Linux; U; Android 4.1.2; en-us; sdk Build/MASTER) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30"
10.0.0.1 - - [27/May/2013:14:29:26 -0400] "GET /js/address_picker.js HTTP/1.1" 200 - "http://10.0.0.102:8000/" "Mozilla/5.0 (Linux; U; Android 4.1.2; en-us; sdk Build/MASTER) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30"
10.0.0.1 - - [27/May/2013:14:29:26 -0400] "GET /js/modernizr/2.6.1.custom-input.js HTTP/1.1" 200 - "http://10.0.0.102:8000/" "Mozilla/5.0 (Linux; U; Android 4.1.2; en-us; sdk Build/MASTER) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30"
10.0.0.1 - - [27/May/2013:14:29:26 -0400] "GET /js/menu.js HTTP/1.1" 200 - "http://10.0.0.102:8000/" "Mozilla/5.0 (Linux; U; Android 4.1.2; en-us; sdk Build/MASTER) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30"
10.0.0.1 - - [27/May/2013:14:29:28 -0400] "GET /js/jquery/1.7.2/jquery.min.js HTTP/1.1" 200 - "http://10.0.0.102:8000/" "Mozilla/5.0 (Linux; U; Android 4.1.2; en-us; sdk Build/MASTER) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30"
10.0.0.1 - - [27/May/2013:14:29:28 -0400] "GET /js/jqueryui/1.8.1/jquery-ui.min.js HTTP/1.1" 200 - "http://10.0.0.102:8000/" "Mozilla/5.0 (Linux; U; Android 4.1.2; en-us; sdk Build/MASTER) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30"
10.0.0.1 - - [27/May/2013:14:29:28 -0400] "GET /js/jqueryui/1.8.1/themes/base/jquery.ui.theme.css HTTP/1.1" 200 - "http://10.0.0.102:8000/" "Mozilla/5.0 (Linux; U; Android 4.1.2; en-us; sdk Build/MASTER) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30"
10.0.0.1 - - [27/May/2013:14:29:28 -0400] "GET /js/jqueryui/1.8.1/themes/base/jquery.ui.core.css HTTP/1.1" 200 - "http://10.0.0.102:8000/" "Mozilla/5.0 (Linux; U; Android 4.1.2; en-us; sdk Build/MASTER) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30"
10.0.0.1 - - [27/May/2013:14:29:28 -0400] "GET /js/jqueryui/1.8.1/themes/base/jquery.ui.datepicker.css HTTP/1.1" 200 - "http://10.0.0.102:8000/" "Mozilla/5.0 (Linux; U; Android 4.1.2; en-us; sdk Build/MASTER) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30"
10.0.0.1 - - [27/May/2013:14:29:28 -0400] "GET /js/polyfills/datetime-local/datetime-local-polyfill.js HTTP/1.1" 200 - "http://10.0.0.102:8000/" "Mozilla/5.0 (Linux; U; Android 4.1.2; en-us; sdk Build/MASTER) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30"
10.0.0.1 - - [27/May/2013:14:29:28 -0400] "GET /js/polyfills/datetime-local/datetime-local-polyfill.css HTTP/1.1" 200 - "http://10.0.0.102:8000/" "Mozilla/5.0 (Linux; U; Android 4.1.2; en-us; sdk Build/MASTER) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30"
10.0.0.1 - - [27/May/2013:14:29:28 -0400] "GET /js/polyfills/details/logifill-details-min.js HTTP/1.1" 200 - "http://10.0.0.102:8000/" "Mozilla/5.0 (Linux; U; Android 4.1.2; en-us; sdk Build/MASTER) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30"
10.0.0.1 - - [27/May/2013:14:29:28 -0400] "GET /photo_420x315.gif HTTP/1.1" 200 3115 "http://10.0.0.102:8000/" "Mozilla/5.0 (Linux; U; Android 4.1.2; en-us; sdk Build/MASTER) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30"
10.0.0.1 - - [27/May/2013:14:29:28 -0400] "GET /uploads/photos/81_230x200.jpg HTTP/1.1" 200 2931 "http://10.0.0.102:8000/" "Mozilla/5.0 (Linux; U; Android 4.1.2; en-us; sdk Build/MASTER) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30"
10.0.0.1 - - [27/May/2013:14:29:28 -0400] "GET /placeholders/728x90_banner.png HTTP/1.1" 200 24434 "http://10.0.0.102:8000/" "Mozilla/5.0 (Linux; U; Android 4.1.2; en-us; sdk Build/MASTER) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30"
10.0.0.1 - - [27/May/2013:14:29:28 -0400] "GET /uploads/photos/103_230x200.jpg HTTP/1.1" 200 3368 "http://10.0.0.102:8000/" "Mozilla/5.0 (Linux; U; Android 4.1.2; en-us; sdk Build/MASTER) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30"
10.0.0.1 - - [27/May/2013:14:29:28 -0400] "GET /uploads/photos/60_230x200.jpg HTTP/1.1" 200 2818 "http://10.0.0.102:8000/" "Mozilla/5.0 (Linux; U; Android 4.1.2; en-us; sdk Build/MASTER) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30"
10.0.0.1 - - [27/May/2013:14:29:28 -0400] "GET /uploads/photos/76_230x200.jpg HTTP/1.1" 200 2907 "http://10.0.0.102:8000/" "Mozilla/5.0 (Linux; U; Android 4.1.2; en-us; sdk Build/MASTER) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30"
10.0.0.1 - - [27/May/2013:14:29:29 -0400] "GET /css/mobile.css HTTP/1.1" 200 - "http://10.0.0.102:8000/" "Mozilla/5.0 (Linux; U; Android 4.1.2; en-us; sdk Build/MASTER) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30"
10.0.0.1 - - [27/May/2013:14:29:34 -0400] "GET /apple-touch-icon-72x72.png HTTP/1.1" 200 1262 - "Mozilla/5.0 (Linux; U; Android 4.1.2; en-us; sdk Build/MASTER) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30"
10.0.0.1 - - [27/May/2013:14:29:35 -0400] "GET /css/desktop.css HTTP/1.1" 200 - "http://10.0.0.102:8000/" "Mozilla/5.0 (Linux; U; Android 4.1.2; en-us; sdk Build/MASTER) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30"
于 2013-05-27T18:46:30.523 回答
1

在包含样式表的链接标签上放置一个媒体查询，让浏览器自行排序。这里的任何东西都不需要 JS。

示例代码在这里。

于 2013-05-27T18:02:44.217 回答
0

不要为此使用js，你可以直接在你的html头中做这样的事情：

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

<link rel="stylesheet" media="screen and (min-width: 900px)" href="/css/widescreen.css">

所以，你只在大屏幕上加载“宽屏”css。

于 2013-05-27T18:10:38.660 回答