针对移动设备设计您的网站

智能手机及平板电脑的存在，取代许多不同的设备；越来越多的互联网用户在平板电脑沙发上放松，而不是坐在办公桌前。由于这种行为改变，许多网站运营商面临着新的挑战。不同的手机制造商喜欢不同的尺寸，因此有必要了解如何在不牺牲台式机功能的情况下优化移动设备的网络存在。北京网站建设小编为您分享使用具有适应性或响应式的移动网站设计。



移动网站

移动网站包含HTML文档，HTML文档独立于主页创建，专门用于在单独的URL下进行移动使用。移动服务通常提供主机名'm'，而标准站点使用'www'访问：

m.etycx.com

{{domain}}

理想情况下，应该有每个桌面站点的移动版本，但它们不一定必须彼此相同。如果用户需要在外出时访问您的网站，那么提供移动网站作为桌面网站的替代方案是有意义的。一个例子是可能将门票销售作为桌面版主要关注点的公共交通站点，但有关移动版本的备用信息，例如时间表和中断，这些信息在旅途中更有用。这表明移动网站不一定必须作为子域实现。它们通常针对智能手机进行了优化适应较小的屏幕，较大的按钮和较少的数据密集型图形。对于平板电脑等其他移动设备，如果设计时考虑到智能手机，则移动网站将无法以很佳方式显示。这是创建单独的移动网站的原因。



优点：

网站运营商可以准确指定哪些网站内容应针对移动设备进行优化，以及他们希望将哪些信息保留在桌面PC版本上。

这两个版本的网站都可以单独定制，而不会影响其他版本。

在创建移动网站时，Web开发人员有机会输入设备的技术要求（通常是智能手机）。

由于显示减少，可以创建较小的网站，即使数据速率有限，也可以快速加载。

缺点：

必须单独维护作为移动版本创建的每个单独网站。

对桌面版本所做的更改不会自动在移动版本上进行。

当网站运营商设计移动版本时，可能意味着创建了重复内容，因为材料是直接从桌面版本复制的。这可能会降低您的搜索引擎排名。

自适应设计

设计用于移动使用的单独网站的替代方案是具有自动适应相应设备的布局。该网站的演示基于屏幕的可见部分（视口）。自适应设计依赖于预定义的断点 - 一个相对刚性的设计网格，为精确描述的视口提供不同的视图。桌面，平板电脑和智能手机显示器的布局版本很常见。对自适应网站不能实现对各个屏幕尺寸的流体调整（如下面描述的响应式设计）。媒体查询用作自适应设计的技术基础。这包括CSS3概念它根据其属性调节样式表到输出介质的分配。具有自适应设计的网站通常针对某些设备类型进行优化。Web开发人员将自己定位于流行的产品，如iPhone或iPad，这意味着相关网站并不总是针对所选设备进行优化。

优点：

与响应式网页设计相反，自适应设计的特点是复杂性降低。

由于自适应设计仅支持有限数量的显示，因此网站运营商可以更好地控制内容的呈现方式。

与单独的移动网站不同，只需要维护一个版本的自适应设计。

缺点：

由于专注于某些显示尺寸，自适应设计可能会遇到不同设备格式的显示问题。

某些观点需要分析所需的目标群体。

与移动网站不同，所有显示版本都显示相同的内容。移动设备只能部分减少数据量。

响应设计

自适应网站仅提供有限数量的显示选项，但随着各种移动设备的增加，对更灵活的显示类型的需求也越来越大。许多网站运营商更喜欢响应式设计，这也是基于CSS3媒体查询。与自适应设计一样，服务器向所有设备提供相同的HTML代码。这意味着该网站在同一URL下的各种布局变体中都可用。但与自适应设计不同，对设备屏幕尺寸的适应性可以顺利进行没有定义视口的刚性网格。这允许移动站点充分利用设备屏幕上的所有可用空间。由于响应式设计的复杂性，在这个设计原则上推出一个网站既繁琐又昂贵。必须以灵活的方式设计内容和布局。文本片段，图像，视频和表格应该适用于智能电视和手机。许多网站运营商没有开发自己的设计，而是选择使用内容管理系统，如WordPress，Joomla，Drupal和Typo3。这些开源项目依赖于大型用户和开发人员社区，并提供各种预制设计模板和响应式设计，其中一些可免费使用。

优点：

响应式设计考虑了每种显示器尺寸，包括将来将在市场上推出的移动设备。

与自适应设计的情况一样，不得进一步维护移动网站设计。

良好的响应式设计可在所有支持的设备上提供用户感知比较。

缺点：

实施响应式设计的成本很高（特别是在涉及预先存在的项目时）。

来自复杂网页的内容不能总是如此容易地转移到小型显示器上。

移动设备加载与台式PC相同的数据量。因此，移动设备上的页面加载时间通常比单独的移动网站慢。

关于“移动网站设计”的文章介绍到这里，想了解更多的相关知识欢迎咨询我们的在线客服。