如何建立兼容手机或移动装置的网站

一个兼容移动性的网站是为优化智能手机和平板电脑的体验而设计。由于不同移动装置的屏幕大小和解析度不同，网站设计和网站内容最好能作出相应的调整，以优化用户的网站浏览体验，使用不同装置仍可轻松浏览网站。

在智能手机面世之前，大家都习惯使用桌面型电脑浏览网页。网站管理员普遍都只需专注于设计美观的桌面版网站。但随着智能手机的普及，越来越多人改变了浏览网页的习惯。根据 StatCounter 的数据，2019年7月全球移动装置的市场占有率为 55%，较多于桌面型装置市场占有率的 45% 。一个网站即使在桌面上显示良好，不等于能在屏幕细小的移动装置上也容易浏览或点击。为了令移动装置用户与您的网站保持互动，网站上的文字大小应易于阅读，导航和连结也应易于点击。这样有助于减低跳出率并提高移动用户的转化率。另一方面，Google 亦曾指出，兼容移动装置的网站对网站排名 SEO 相当有利。因此，由现在开始，网站管理员都必须改善网站，兼容移动装置。

响应式网页设计 (Responsive Web Design)

响应式网页设计可识别不同装置的浏览器而作出自动调整，令版面设计可迎合不同的屏幕尺寸和解析度。市场上的大型CMS 内容管理系统(Content Management System) 如WordPress，Magento，Drupla 和Joomla 等，都提供过百种响应式网页设计主题，用户可安装合适的主题，并重新检查是否兼容桌面版及移动版网站。

更大的字体和按钮

当您在 6 英寸的屏幕上浏览网站时，如果网站内容的文字和图片显示太细小而无法阅读，便需要不停放大和缩小版面，这个重复动作会令人感到不耐烦。更差的是，网站上的按钮太细，或者按钮之间的距离太近，导致不能击中或不断点击错误的按钮。为减少网站访客受到这种困扰，一个兼容移动装置的网站应该使用至少 14pt 的字体大小，以便阅读。而按钮应该放在当眼的位置，有足够的大小适合用手指点击。同时亦要确保在按钮之间预留适当的空间，以妨浏览者意外点击错误的按钮。

使用标准的字体

字体是网站设计的关键元素之一。自定及有创意的字体会令您的网站看起来更吸引，但当用户使用移动装置浏览您的网站时，便需要先下载特定的字型到他们的电话或平板电脑上，才能正常访问该网站。这样会令加载网站的时间更长，而更糟糕的是，某些访问者可能会拒绝下载特别字体并立即离开您的网站。一个适合移动装置的网站，应使用大多数装置都已预先安装的标准字体，同时亦要确保网站所选用的字体是清晰且易于阅读的。

取消弹出式视窗

一个兼容移动装置的网站，应该避免使用弹出式视窗，通常关闭这些弹出式视窗的「X」按钮都非常细小，难以被手指击中。当浏览者尝试关闭它时，可能会不小心击中弹出式视窗的内容，并登陆到新的网站中。这种视窗会令人感到厌烦，同时影响到用户体验，如果真的有需要使用弹出式视窗，请尽量让用户自由选择，按下连结才弹出，通常在这种情况之下，他们会比较易于接受弹出视窗的资讯内容。另外，请确保弹出式视窗易于关闭，以便他们可以继续浏览您的网站。

不要使用 Flash

Android 和 iOS 作业系统均不支援 Flash，而大部分移动装置均使用这两个系统。如果以 Flash 制作整个网站内容，则无法在大部分的移动装置上显示。此外，使用 Flash 亦会减慢网站的加载时间，因而令 SEO 受到负面影响。如果您的网站仍在使用 Flash，我们强列建议您以 HTML 这类型兼容式的代码取替。

简单的网站目录和表格

手机的屏幕尺寸比桌面电脑小得多。如果您的网站使用延伸目录并具有很多选项，可能并不适合在细小的移动屏幕上显示。因此，移动版的目录设计应尽量简洁，并保持在一个屏幕大小内可展示，令网站浏览者无需滚动、放大或缩小去查看内容。如果您的网站载有表格，亦应保持简短及确保使用者能易于输入资料，删去不必要的资料栏。因为使用手机来输入详细的资料较难及繁复，设计表格时可提供副助，例如当要求使用者输入纯数字的栏位，可设定为数字键盘而非全键盘，另外亦可取消自动更正，以避免智能手机自动将使用者输入的资料切换至其他常用词。

压缩图像和 CSS

碍于移动装置的频宽通常比桌面型电脑较小，移动版网页的加载时间通常较长，为了使页面加戴时间缩短，您可尝试将图像压缩到最小的文件大小，同时在所有设备上仍保持清晰的外观。另外，消除不必要的文件大小较大的图像或闪烁灯光效果。通过缩小文件大小，可加快页面加载时间，并改善用户体验。

使用百分比

设定网站的 HTML 元素如宽度时，应尽量使用百分比，以便这些元素可因应不同屏幕大小而作出调整，有助于在不同的装置设备上提供一致的观看体验。相反，如果以像素为单位设定宽度，当屏幕尺寸改变时，这些元素的宽度是不会随之而变更。如果您设置的宽度像素大于手机屏幕的尺寸，会令用户浏览时将需要水平滚动页面，严重影响用户体验。

总而言之，一个兼容移动装置的网站，应具有响应能力、简化的目录和表格、标准字型、大字体和大按钮。同时应避免弹出式视窗和使用 Flash，并使用百分比来配置网站及其他元素的宽度，尽量将图像和 CSS 文件大小减到最小。