中占据了很大的市场份额

[account_disabled]

但它绝不是完美的。某些移动设备（例如 iPad）的宽度超过 480 像素无法使用此方法。然而这些较大的设备可以说不需要压缩的移动布局。展望未来可能会有更多设备不适合这种模式。不幸的是由于标准仍在不断涌现因此很难实现面向未来的移动检测。 除了设备检测之外媒体查询方法还存在其他问题。主要是媒体查询只能以不同的方式设计内容并且无法控制内容交付。例如媒体查询可用于隐藏侧栏的内容但它无法阻止用户下载该标记。鉴于移动带宽问题不应简单地忽略此附加 HTML。 用户启动的方法 宜家的非移动网站 考虑到移动UA检测的困难和媒体查询的陷阱宜家等一些公司选择简单地让用户决定是否查看其网站的移动版本。虽然这有一个明显的缺点即需要更多的用。



户交互但它可以说是最简单的方法也是最容易实现的方法。 该网站包含一个链接内容为“访问我们的移动网站”该链接会将用户转移到移动子域。这种方法有一些缺点。当然一些移动用户可能会错过该链接而其他非移动访问者可能会点击它因为无论使用什么设备它都是 购买电话号码列表 可见的。尽管如此该技术的优点是允许用户做出移动决策。一些用户更喜欢针对其设备进行优化的精简布局而其他用户可能更喜欢访问整个网站而不受有限移动布局的限制。 移动样式表要改变什么 现在我们已经实现了移动样式表是时候了解我们真正想要更改的样式的具体细节了。 在 Smashing 杂志上做广告 增加和改变屏幕空间 CNN 标准网站与移动网站 移动样式表的主要目标是改变较小显示的布局。首先这意味着将多列布局减少为单。







列。大多数移动屏幕都是垂直的因此水平空间变得更加“昂贵”并且移动布局很少能承受多于一列的内容。display: none;接下来通过设置不太重要的元素来减少整个页面的混乱。最后通过减少边距和填充来节省额外的像素以创建更紧凑的布局。 减少带宽 移动样式表的另一个目标是减少速度较慢的移动网络的带宽。首先请确保删除或替换任何大的背景图像尤其是当您为整个网站使用背景图像时。另外设置display: none任何不必要的内容图像。 如果您的网站使用图像作为按钮或导航请考虑将其替换为纯文本/CSS 对应项。最后如果您想强制浏览器对任何图像使用替代文本请使用此代码片段（并使用 JavaScript 添加类as-text并img确保alt在标记中正确定义 -attributes）： img.as-text { 内容：attralt; } 其。