0

我正在为移动设备转换一个网站。如果我的代码结构如下，想知道用于为移动设备用户提供第二组图像的最佳实践吗？我已经在使用媒体查询为较小的设备提供不同的布局，并希望向移动用户提供第二组较小的图像。

            <div class="main_view">
                <div class="window">    
                    <div class="image_reel">
                        <a href=""><img src="pics/1.jpg" alt="" /></a>
                        <a href=""><img src="pics/2.jpg" alt="" /></a>
                    </div>
                </div>
                <div class="paging">
                    <a href="#" rel="1">1</a>
                    <a href="#" rel="2">2</a>
                </div>
            </div>

这个 html 引用了 Javascript，它创建了一种类似于此处建议的“图像滑块”效果。该站点不必提供很多图像。我宁愿不重新设计整个站点以使用 css sprites 和背景图像。

我可以向仅使用移动设备的用户提供多组图像的最佳/最高效的浏览器方式是什么？例子赞赏。

谢谢你。

4

3 回答 3

3

一种方法是将所有图像引用放入 CSS 中，并针对一组不同的 CSS 规则使用媒体查询来指定较小的图像。您可以像这样将所有图像放在 CSS 中：

<a href=""><img id="img1" src="blank.gif" height="400" width="600"></a>

blank.gif 是一个 1x1 像素的透明 gif（完全不可见），缩放到图像标签中的高度/宽度。它很小，很容易被浏览器缓存。

然后，在你的常规屏幕 CSS 中，你有这个：

#img1 {background: transparent url(pics/1.jpg) no-repeat;}

然后在由媒体查询指定的小屏幕 CSS 中，您有：

#img1 {background: transparent url(pics/1-small.jpg) no-repeat;}

使用这种 CSS 机制的一个显着优势是您不必加载一组较大的图像，然后在事后将它们更改为较小的图像。由于浏览器在解析 HTML 之前会遇到小型设备的媒体查询 CSS 样式表，因此它只会加载小图像。任何基于 javascript 的解决方案都必须等待 DOM 加载后才能“修补”正确的图像。

于 2012-03-20T07:11:47.410 回答
1

您可以在图像标签中使用自定义属性，指定用于非移动设备的图像，src如果用户代理是非移动设备，则可以将属性更改为此值。你可以做这样的事情（伪代码）：

 $(document).ready(function() {
     if(!navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) {
       $('.mobile').each(function() {
          $(this).attr('src',$(this).attr('high-res-img'));
       });
     }
 });

 <img class="mobile" src="images/your-mobile-image.jpg" high-res-img="images/mobile-image.jpg" alt="" />
于 2012-03-20T07:11:03.920 回答
0

另一种选择是（如果启用了 javascript，这可能是如果您使用滑块）使用 js 测试移动设备，然后在滑块脚本运行之前将滑块的 html 代码替换为适合移动设备的 html 代码/ 初始化。

于 2012-03-20T07:27:27.653 回答