Mobile 如何有条件地加载内容（移动优先）

我即将创建我的第一个“移动优先”网站，我不确定随着视区的增加有条件地加载内容的最佳方式

例如，假设我只想为桌面浏览器而不是移动浏览器加载推特提要，我将如何做到这一点

选项1）显示：无-这是不好的，因为移动设备仍会加载内容

选项2）在标记中包含内容，但使用javascript删除.element-我相信此内容仍然会先加载，然后再删除？如果是这样，那就不好了

选项3）使用javascript，如果视口足够宽，则加载内容-从我所读到的内容来看，这似乎是推荐的方法，但在javascript中使用标记是一个好主意吗？我在考虑可访问性、语义和seo

还有其他更好的解决方案吗

---

任何建议都将不胜感激。

谁说的<代码>显示：无是显示和隐藏任何特定视口元素的最佳实践之一。 Adam，Markup是每个设备可下载的最少的东西，如果您通过Jquery或Javascript隐藏元素，它们必须处理其他一些事情。因为有时候小型设备要么不支持加载它们，要么需要额外的时间，这就是为什么它们是可见的

但它在搜索引擎优化方面存在缺陷。 对于SEO优化和隐藏元素，您可以使用CSS执行以下操作之一

首先,

@media screen and (max-width:480px) {
    div { 
position: absolute;
left: -9999em;
width: 0;
height: 0;
overflow: hidden;
       }
}

但效果不太好，因为谷歌网站管理员负责所有此类黑客。你可能会因为被谷歌索引而被列入黑名单，所以你应该使用这些现代方法中的一种来隐藏元素

第二,

    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;
           }

---

你可能想退房。它易于安装，您可以使用它检查访客浏览器中的HTML5支持，以及窗口宽度，例如：

if (Modernizr.mq('(min-width: 400px)')) {
 /* do this for tablets and desktops */
}else{
 /* do this for handhelds */
}

祝你好运

更新

---

谢谢，但是在这种情况下，直接使用javascript-if（document.documentElement.clientWidth>640）这样做不是更好吗

你是对的，在决定是否加载推特提要的具体例子中，使用我的建议可能没有比选择3更大的优势。但是，考虑到repsonsive设计、移动网站以及现在的HTML5，接下来的问题是如何为不同的视点定制CSS，或者如何测试访问者的浏览器是否支持某种HTML5功能

您当然可以采用自己的方法，为每种情况编写自定义javascript，或者您可以使用Modernizer测试访客浏览器是否支持媒体查询，以及是否不加载，或者使用Modernizer测试访客浏览器是否支持地理定位或html5表单或某些视频格式。。。，如果它没有有条件地加载

---

实现同一个目标通常有多种方法，我强烈主张不要重新发明轮子；）

谢谢你的回复。你是对的，Display:none不错，事实上非常有用，但是当尝试加载整个内容块（包括twitter提要之类的javascript）时，Display:none不应该在本例中使用，因为即使内容不会显示，移动设备也必须下载该javascript。所以，简单地隐藏内容并不是我想要做的，我试图阻止它加载其他内容，因为你必须转到Twitter提要框并检查它的类，它将从服务器获取响应，并通过在该实例上破坏它或只是简单地从其父元素中删除它来停止它。它在javascript中更加简单和快速。不，twitter提要只是一个例子。如果它是通用内容呢？我正在寻找javascript解决方案。我认为你没有正确理解这个问题。我正在寻找随着屏幕变大而有条件加载内容的最佳方法。谢谢，但是在这种情况下，直接用javascript加载不是更好吗？如果（document.documentElement.clientWidth>640），但这是我问题中的选项3。