网站建设移动网站界面设计之尺寸基础常识

去年有个做服装批发的老板拿着手机给我看他的官网，说客户发来链接打开后按钮挤成一团，点“在线咨询”直接跳到页脚去了。问题不在设计好不好看，在于移动端界面的尺寸基础没打牢。网站建设移动网站界面设计之尺寸基础常识说白了就一句话：手机上每块区域该占多少、元素之间留多大空、字号按什么基准缩放，这些数定错了，后面再花哨的交互都白搭。

先搞清楚移动端和电脑端不是等比缩小

电脑上1366像素宽的版式，直接按比例压到375像素的手机屏上，文字变成蚂蚁大小，手指点上去两个按钮分不开。移动界面的尺寸逻辑得换一套算法，按物理尺寸倒推布局，不是按屏幕比例硬套。

Viewport 这块地基先打对

页面头部那行 meta 标签里的 viewport 设置，是手机浏览器按什么宽度渲染页面的总开关。写成 width=device-width, initial-scale=1，页面宽度就跟设备屏幕逻辑宽度走，不写这行，手机会默认按980像素渲染再整体缩小，字全糊。

物理像素和逻辑像素要分清。一台标称1080像素宽的安卓机，逻辑宽度可能只有360到412像素之间，界面设计按逻辑像素来算，按物理像素排版，元素尺寸全乱。

常用断点记几个够用

响应式断点不用设一堆，按行业惯例分3档就覆盖多数机型：360像素以下算小屏，360到414像素是主流区间，768像素往上进入平板和横屏。断点设在内容开始挤的位置，不是死记设备型号。

字号、间距、点击区域，三个数定成败

移动端界面出问题，多半集中在这三个尺寸参数上。它们各自有实操可循的取值区间，不是凭感觉调。

点击区域别只看图标大小

图标画了24像素，不代表可点范围只有24像素。给按钮加透明内边距把响应区域撑到44像素以上，视觉没变，手指点得准。遇到过的实际情况是，同一个“加入购物车”按钮，撑大响应区之后移动端误触率明显下来了。

安全区这个概念得带上

全面屏手机底部有手势条，顶部有刘海或挖孔。关键按钮和文字避开这两块区域，用环境变量留出安全边距，不然底部导航栏被手势条压住一半，用户点不到。

图片和容器宽度，适配规则不一样

图片适配记住一条：宽度设成百分比，更大宽度不超过容器，高度自动。写死固定宽度的图，换个屏幕就溢出或者留白。

容器用弹性布局别用固定像素

主内容区宽度用百分比或弹性单位，左右留白按屏幕宽度给比例。卡死固定像素宽度的容器，在窄屏上直接横向溢出，用户得左右拖着看，体验很糟。

横竖屏切换要测

竖屏做好的版式，横过来可能元素全堆在一起。至少测一次横屏状态，导航栏、弹窗、表格这几类元素在横屏下是否还可用。

表单和输入框的尺寸细节

移动端表单是转化关键节点，尺寸没调好，用户填一半就跑了。输入框高度一般给44到48像素，太小手指点不准光标。输入框之间间距留16像素左右，太挤容易点错行。

表单里的下拉选择、日期选择尽量调系统原生控件，自定义控件在手机上适配成本高，还容易跟键盘弹出冲突。键盘弹起时输入框被遮挡的问题，靠监听视口变化把输入框滚进可视区解决。关于页面结构怎么配合关键词布局来规划，可以参看《网站建设网站设计要怎么规划才能利于关键词排名SEO优化》里更细的拆解，尺寸打底和内容结构是两条腿。

多机型实测，别只在自己手机上滑一遍

开发环境模拟器跟真机有差距。至少拿3台真机测：小屏安卓、主流尺寸安卓、iPhone各一台。测的内容包括按钮能不能点准、文字会不会溢出容器、横屏是否正常、键盘弹起是否遮挡输入框。

浏览器技术团队工具的设备模拟够用来看布局，但触摸响应、字体渲染、滚动惯性这些还得真机验证。验收时把这几项做成核对清单逐条过，比上线后用户反馈再来改省事得多。

总结

移动端尺寸这摊事，核心就三块：viewport 打底、字号和点击区域定标准、容器和图片用弹性规则。网站建设移动网站界面设计之尺寸基础常识不难，难在每处细节都按标准落地。尺寸基础打歪了，后期改版增长花时间；打正了，后面加功能、调样式都顺。先把自己手边项目按上面几个数对一遍，能发现的问题比想象中多。