我即将创建我的第一个“移动优先”网站，但不确定在视口(viewport)增加时有条件地加载内容的最佳方式。
例如，假设我希望只为桌面浏览器加载 Twitter 提要，而不是移动浏览器，我该怎么做？
选项 1) 显示:无 - 这很糟糕，因为内容仍在为移动设备加载
选项 2)在标记中包含内容，但使用 javascript 删除元素 - 我相信此内容仍会先加载，然后再删除？如果是这样，那就不好了。
选项 3)使用 javascript，如果视口(viewport)足够宽，加载内容 - 从我读到的内容来看，这似乎是推荐的方法，但是在 javascript 中添加标记是个好主意吗？我正在考虑可访问性、语义和搜索引擎优化。
还有其他更好的解决方案吗？
如有任何建议，我们将不胜感激。
最佳答案
您可能想查看 Modernizr .它易于安装，您可以使用它来检查访问者浏览器是否支持 HTML5 以及窗口宽度，例如:
if (Modernizr.mq('(min-width: 400px)')) {
/* do this for tablets and desktops */
}else{
/* do this for handhelds */
}
祝你好运!
更新
thanks, but then in that case would it not be better to do that straight with javascript - if (document.documentElement.clientWidth > 640)
你是对的，对于决定是否加载 Twitter 提要的特定实例，使用我的建议可能不会比你的选项 3 有太大优势。不过提前考虑，响应式设计、移动网站和现在是 HTML5，接下来您要遇到的问题是如何为不同的视点自定义 CSS，或者如何测试访问者的浏览器是否支持某个 HTML5 功能。
您当然可以采用自己动手的方法并为每种情况编写自定义 javascript，或者您可以使用 Modernizr 来测试访问者浏览器是否支持媒体查询，以及它是否不加载 respond.js , 或使用 Modernizr 测试访问者的浏览器是否支持地理定位或 html5 表单或某些视频格式...，以及它是否有条件地加载 cross browser polyfill .
通常有多种方法可以实现相同的目标，我强烈反对重新发明轮子；)
关于mobile - 如何有条件地加载内容(移动优先)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15296908/