php - 如何让自适应图像为响应式 BootStrap 图像发送正确的文件大小?

标签 php twitter-bootstrap responsive-design pagespeed adaptive-design

我有 Matt Willcox 的好书 adaptive-images在我的网站上工作。它是这样工作的:

  • 服务器提供 800 像素的图片。
  • Adaptive-images 重定向到不大于您的分辨率宽度的图像

问题是 BootStrap 在桌面上以列显示图像,在平板电脑和移动设备上以全角显示图像。因此从技术上讲,自适应应该为桌面提供比较小视口(viewport)更小的图像。 Google PageSpeed 正在为此抨击我。我有 800 像素的图像缩小到大约 150 像素左右。

我做了很多研究,但似乎找不到可行的解决方案。我是否应该破解自适应图像以查看分辨率宽度以外的功能以提供正确的图像?是否有其他库可以解决此问题?

最佳答案

由于 cookie 中的分辨率是通过 JS 设置的,您可以尝试覆盖 installation step 3 中提供的代码

根据这个,Cookies 应该有更高的优先级:

It handles cases where there isn't a cookie set; mobile devices will be supplied the smallest image, and desktop devices will get the largest

编辑我还建议注意标签,因为它是 described on the projects github page然而,还是有problems浏览器支持此功能,希望它们能在不久的将来得到修复

关于php - 如何让自适应图像为响应式 BootStrap 图像发送正确的文件大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29131635/

相关文章:

javascript - 在数据表中使用分页时验证失败

php - MYSQL 错误,服务器消失了?

css - 自定义桌面上的 Bootstrap 列排列

javascript - 如何在javascript bootstrap中将按钮放置在另一个按钮之下

css - 响应式投资组合的标题行为不正确

html - 响应式 CSS;图像移动到下一行而不是缩小

javascript - 在 React 中切换布局同时保持状态

php - 如何完美使用redis中的五种数据结构

PHP - 计算两个日期之间的天数 - 在 2013 年 3 月和 4 月不起作用

css - Bootstrap 禁用手机/平板电脑的 View