我即将创建我的第一个“移动优先”网站，但不确定随着视口增加有条件地加载内容的最佳方式。
例如，假设我希望仅为桌面浏览器而不是移动设备加载 twitter 提要，我该怎么做？
选项 1) 显示：无 - 这很糟糕，因为移动设备仍会加载内容
选项 2）在标记中有内容，但使用 javascript 删除.element - 我相信此内容仍会先加载，然后再删除？如果是这样，那就不好了。
选项 3) 使用 javascript，如果视口足够宽，则加载内容 - 从我读过的内容来看，这似乎是推荐的方法，但是在 javascript 中使用标记是个好主意吗？我正在考虑可访问性、语义和 seo。
还有其他更好的解决方案吗？
任何建议将不胜感激。
【问题讨论】：
标签： mobile responsive-design conditional
您可能想查看Modernizr。它易于安装，您可以使用它检查访问者浏览器中的 HTML5 支持以及窗口宽度，例如：
if (Modernizr.mq('(min-width: 400px)')) {
/* do this for tablets and desktops */
}else{
/* do this for handhelds */
}
祝你好运！
更新
谢谢，但在那种情况下，直接用 javascript 做这件事不是更好吗 - if (document.documentElement.clientWidth > 640)
您是对的，对于决定是否加载 twitter 提要的特定实例，使用我的建议可能没有太大的优势，而不是您的选项 3。不过，请提前考虑，通过响应式设计、移动网站和现在是 HTML5，接下来你要遇到的问题是如何针对不同的观点自定义 CSS，或者如何测试访问者的浏览器是否支持某个 HTML5 功能。
您当然可以采用自己动手的方法并为每种情况编写自定义 javascript，或者您可以使用 Modernizr 来测试访问者浏览器是否支持媒体查询，以及它是否不加载 respond.js，或者使用Modernizr 来测试访问者的浏览器是否支持地理定位或 html5 表单或某些视频格式......，以及它是否有条件地加载 cross browser polyfill。
实现同一个目标通常有多种方法，我坚信不重复发明轮子；）
【讨论】：
谁说的？ Display:none; 是为任何特定视口显示和隐藏元素的最佳实践之一。
还有一件事亚当，标记是每台设备下载量最少的东西，如果你用 Jquery 或 Javascript 隐藏元素，它们必须处理一些其他的东西。因为有时小型设备要么不支持加载它们，要么需要额外的时间，这就是它们可见的原因。
但它有 SEO 目的的陷阱。 对于 SEO 优化以及隐藏元素，您可以使用 CSS 执行这些操作之一。
首先，
@media screen and (max-width:480px) {
div {
position: absolute;
left: -9999em;
width: 0;
height: 0;
overflow: hidden;
}
}
但效果较差，因为 Google 网站管理员会处理所有此类黑客行为。而且您可能会被列入 Google 索引的黑名单。因此，您应该使用这些现代方法之一来隐藏元素。
第二，
div {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
padding: 0 !important;
border: 0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden;
}
或者，第三个，
div {
color:transparent;
text-indent:100%;
overflow:hidden;
white-space:no-wrap;
font:0/0 a;
text-shadow:none;
}
【讨论】：