Question

我即将创建我的第一个“移动优先”网站，并且不确定在视口增加时有条件地加载内容的最佳方式。

例如，假设我希望仅为桌面浏览器加载Twitter Feed，而不是移动，我该怎么做？

选项1）显示：无 - 这很糟糕，因为移动内容仍会加载

选项2）在标记中有内容，但是用javascript删除了元素 - 我相信这个内容仍然先加载，然后被删除？如果是这样，那就不好了。

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

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

非常感谢任何建议。

Answer 1

您可能想查看Modernizr。它易于安装，您可以使用它在访问者浏览器中检查HTML5支持，以及窗口宽度，例如：

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

祝你好运！

更新

谢谢，但在那种情况下用javascript直接做到这一点并不是更好 - if（document.documentElement.clientWidth＆gt; 640）

你是对的，对于决定是否加载Twitter提要的特定实例，使用我的建议而不是你的选项可能没有很大的优势3.提前考虑，通过代表性设计，移动网站和现在HTML5，您要遇到的下一个问题是如何为不同的视点自定义CSS，或者如何测试访问者的浏览器是否支持某个HTML5功能。

您当然可以采用自己动手的方法并为每个案例编写自定义javascript，或者您可以使用Modernizr来测试访问者浏览器是否支持媒体查询，如果它没有加载respond.js，或使用Modernizr来测试vistor的浏览器是否支持地理定位或html5表单或某些视频格式......，以及它是否有条件地加载cross browser polyfill。

通常有多种方法可以实现相同的目标，我强烈要求不重新发明轮子;）

Answer 2

谁说？ Display:none;是显示和隐藏任何特定视口元素的最佳实践之一。有一件事，亚当，标记是每个设备最少可下载的东西，如果你用Jquery或Javascript隐藏元素，他们必须处理其他一些东西。因为有时小型设备要么不支持加载它们，要么花费额外时间，这就是它们可见的原因。

但它有搜索引擎优化的缺陷。对于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;
           }

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

2 个答案: