3

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

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

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

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

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

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

任何建议将不胜感激。

4

2 回答 2

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 > 640)

你是对的，对于决定是否加载 twitter 提要的特定实例，使用我的建议可能没有太大的优势，而不是你的选项 3。不过，考虑到响应式设计、移动网站和现在的 HTML5，您将遇到的下一个问题是如何针对不同的观点自定义 CSS，或者如何测试访问者的浏览器是否支持某个 HTML5 功能。

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

通常有多种方法可以实现相同的目标，我坚信不重新发明轮子；）

于 2013-03-08T19:14:29.220 回答
0

谁说？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 索引的黑名单。因此，您应该使用这些现代方法之一来隐藏元素。

第二，

    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;
           }
于 2013-03-08T17:48:28.283 回答