Moorper Wiki - blog:html
我等采石之人，当心怀建造大教堂之愿景。
https://wiki.moorper.com/
2026-04-08T21:08:23+00:00
Moorper Wiki
https://wiki.moorper.com/
https://wiki.moorper.com/_media/wiki:dokuwiki.svg
-
text/html
2021-11-18T14:31:47+00:00
Anonymous (anonymous@undisclosed.example.com)
H5 移动页面自适应解决方案
https://wiki.moorper.com/blog:html:resize
<h1 class="sectionedit1" id="h5-移动页面自适应解决方案">H5 移动页面自适应解决方案</h1>
<div class="level1">
<p>
本文参考<a href="https://main.m.taobao.com/" class="urlextern" target="_blank" title="https://main.m.taobao.com/" rel="ugc nofollow noopener">手淘</a>的 H5 页面自适应解决方案。
</p>
<p>
打开手淘的首页，查看源码，我们会在 head 中发现这样一段代码，这就是手淘页面自适应的关键。
</p>
<pre class="code javascript"><span class="sy0">!</span><span class="kw1">function</span><span class="br0">(</span>e<span class="sy0">,</span>t<span class="br0">)</span><span class="br0">{</span><span class="kw1">var</span> n<span class="sy0">=</span>t.<span class="me1">documentElement</span><span class="sy0">,</span>d<span class="sy0">=</span>e.<span class="me1">devicePixelRatio</span><span class="sy0">||</span><span class="nu0">1</span><span class="sy0">;</span><span class="kw1">function</span> i<span class="br0">(</span><span class="br0">)</span><span class="br0">{</span><span class="kw1">var</span> e<span class="sy0">=</span>n.<span class="me1">clientWidth</span><span class="sy0">/</span><span class="nu0">3.75</span><span class="sy0">;</span>n.<span class="me1">style</span>.<span class="me1">fontSize</span><span class="sy0">=</span>e<span class="sy0">+</span><span class="st0">"px"</span><span class="br0">}</span><span class="kw1">if</span><span class="br0">(</span><span class="kw1">function</span> e<span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>t.<span class="me1">body</span><span class="sy0">?</span>t.<span class="me1">body</span>.<span class="me1">style</span>.<span class="me1">fontSize</span><span class="sy0">=</span><span class="st0">"16px"</span><span class="sy0">:</span>t.<span class="me1">addEventListener</span><span class="br0">(</span><span class="st0">"DOMContentLoaded"</span><span class="sy0">,</span>e<span class="br0">)</span><span class="br0">}</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">,</span>i<span class="br0">(</span><span class="br0">)</span><span class="sy0">,</span>e.<span class="me1">addEventListener</span><span class="br0">(</span><span class="st0">"resize"</span><span class="sy0">,</span>i<span class="br0">)</span><span class="sy0">,</span>e.<span class="me1">addEventListener</span><span class="br0">(</span><span class="st0">"pageshow"</span><span class="sy0">,</span><span class="kw1">function</span><span class="br0">(</span>e<span class="br0">)</span><span class="br0">{</span>e.<span class="me1">persisted</span><span class="sy0">&&</span>i<span class="br0">(</span><span class="br0">)</span><span class="br0">}</span><span class="br0">)</span><span class="sy0">,</span><span class="nu0">2</span><span class="sy0"><=</span>d<span class="br0">)</span><span class="br0">{</span><span class="kw1">var</span> o<span class="sy0">=</span>t.<span class="me1">createElement</span><span class="br0">(</span><span class="st0">"body"</span><span class="br0">)</span><span class="sy0">,</span>a<span class="sy0">=</span>t.<span class="me1">createElement</span><span class="br0">(</span><span class="st0">"div"</span><span class="br0">)</span><span class="sy0">;</span>a.<span class="me1">style</span>.<span class="me1">border</span><span class="sy0">=</span><span class="st0">".5px solid transparent"</span><span class="sy0">,</span>o.<span class="me1">appendChild</span><span class="br0">(</span>a<span class="br0">)</span><span class="sy0">,</span>n.<span class="me1">appendChild</span><span class="br0">(</span>o<span class="br0">)</span><span class="sy0">,</span><span class="nu0">1</span><span class="sy0">===</span>a.<span class="me1">offsetHeight</span><span class="sy0">&&</span>n.<span class="me1">classList</span>.<span class="me1">add</span><span class="br0">(</span><span class="st0">"hairlines"</span><span class="br0">)</span><span class="sy0">,</span>n.<span class="me1">removeChild</span><span class="br0">(</span>o<span class="br0">)</span><span class="br0">}</span><span class="br0">}</span><span class="br0">(</span>window<span class="sy0">,</span>document<span class="br0">)</span></pre>
<p>
我们可以讲这段代码复制到我们自己页面的 head 中，其中需要关注两个数字。 1、3.75，这个数字需要根据我们设计图的宽带来调整，把设计图宽度除以100就可以了； 2、16，这个数字是 body 区域的默认字体大小，可以根据自己的需求修改。
</p>
<p>
最后再添加一段仍是从手淘页面复制过来的 viewport 配置就可以尽情书写代码了：
</p>
<pre class="code html4strict"><span class="sc2"><<a target="_blank" href="http://december.com/html/4/element/meta.html"><span class="kw2">meta</span></a> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"viewport"</span> <span class="kw3">content</span><span class="sy0">=</span><span class="st0">"width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"</span>></span></pre>
<p>
设计图中的 px 像素单位，我们把它除以 100 改为 rem 单位，就可以了，这样不管在什么屏幕上看到的页面比例和设计图都是一模一样的。
</p>
<p>
<<abbr title="HyperText Markup Language">HTML</abbr>>
<iframe src=“<a href="https://codesandbox.io/embed/h5-yidongyemianziguaying-kvu0h?fontsize=14&hidenavigation=1&theme=dark&view=preview" class="urlextern" target="_blank" title="https://codesandbox.io/embed/h5-yidongyemianziguaying-kvu0h?fontsize=14&hidenavigation=1&theme=dark&view=preview" rel="ugc nofollow noopener">https://codesandbox.io/embed/h5-yidongyemianziguaying-kvu0h?fontsize=14&hidenavigation=1&theme=dark&view=preview</a>”
</p>
<pre class="code"> style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
title="H5 移动页面自适应"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe></pre>
<p>
</<abbr title="HyperText Markup Language">HTML</abbr>>
</p>
</div>