Z-Blog 主题适配移动端：viewport 与模板断点的处理

2026-10-20 · zblog · 阅读 20

摘要

Z-Blog 默认主题很少做移动端适配。viewport 必须写在 header.php 的 head 里，且不能靠 JS 动态插入；断点应按内容区宽度选择，侧栏顺序和图片尺寸也要一起做响应式处理。

Z-Blog 默认主题很少做移动端适配，自己改的时候这两个地方最容易漏。

一、viewport 必须写在 header.php 里

<meta name="viewport" content="width=device-width, initial-scale=1">

少了这一行，手机上会按 980px 渲染再整体缩小，文字小到看不清。它要放在 <head> 里，且不能通过 JS 动态插入，部分浏览器读不到。

常见断点：

不需要每个都写，按主题实际布局定。以内容区宽度为基准来断更合理，别对着设备型号硬凑。

光靠 CSS 媒体查询不够，侧栏在手机上要塞到正文后面、导航要折叠。这需要在模板里给区块加语义化的 class，再用 CSS 控制顺序：

.layout { display: flex; }
.sidebar { order: 2; }
@media (max-width: 768px) {
    .layout { flex-direction: column; }
}

img { max-width: 100%; height: auto; }

两行代码解决 90% 的图片溢出问题。但注意：加上全局 img 规则后，主题里原本用小图做图标的元素也可能被拉伸，需要用 class 排除。

Z-Blog 支持按设备切换主题，但维护两套成本很高。除非站点有明确的移动端流量需求，否则响应式一套就够。

所属专题

标签

2026年10月20日 14:59 前后30天 · 点日期看归档

9月20日 9月21日 9月22日 9月23日 9月24日 9月25日 9月26日 9月27日 9月28日 9月29日 9月30日 10月1日 10月2日 10月3日 10月4日 10月5日 10月6日 10月7日 10月8日 10月9日 10月10日 10月11日 10月12日 10月13日 10月14日 10月15日 10月16日 10月17日 10月18日 10月19日 10月20日 10月21日 10月22日 10月23日 10月24日 10月25日 10月26日 10月27日 10月28日 10月29日 10月30日 10月31日 11月1日 11月2日 11月3日 11月4日 11月5日 11月6日 11月7日 11月8日 11月9日 11月10日 11月11日 11月12日 11月13日 11月14日 11月15日 11月16日 11月17日 11月18日 11月19日