移动优化 - 根据屏幕大小有条件地加载 HTML答案

【问题标题】：Mobile Optimization - Conditionally load HTML depending on screen size移动优化 - 根据屏幕大小有条件地加载 HTML
【发布时间】：2014-06-06 18:04:05
【问题描述】：

我首先要针对移动设备重新设计我的网站。我已经阅读了一些与此相关的 stackoverflow 问题，但似乎没有一个是完整的答案。我在网上搜索了一下，发现http://www.smashingmagazine.com/2013/04/03/build-fast-loading-mobile-website/

在移动优先代码部分，它说明了针对不同屏幕尺寸有条件地加载图像的最佳方式。我正在寻找的是，但对于 html 元素。

<div class="social_buttons">
   <ul>
      <li>google</li>
      <li>twitter</li>
      <li>facebook</li>
      <li>pinterest</li>
   </ul>
</div>

我不希望在从移动设备加载时加载这部分 html，但我希望在从台式计算机调用时加载它。

使用来自smasingmagazine的解决方案（使用css有条件地加载）是否可以这样做或者它只适用于图像？

感谢您的帮助 =)

【问题讨论】：

【解决方案1】：

一种方法是根据设备重定向和加载不同的html。

检查这个Link。

或者使用jquery插件Link。

我建议使用媒体查询来显示相应的内容，但使用这种方法你会加载整个 HTML，但会根据设备显示。

关于媒体查询的信息 -LINK

喜欢这个

<div class="social_buttons">
   <ul>
      <li>google</li>
      <li>twitter</li>
      <li>facebook</li>
      <li>pinterest</li>
   </ul>
</div>

css

@media (min-device-width: 640px) {
.social_buttons{
display:none;
  } 
 }

【讨论】：

【解决方案2】：

您可以使用 javascript 来实现。在移动设备或桌面设备上随心所欲。

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 // mobile
} else {
 // desktop
}

【讨论】：