content"width=640,user-scalable=no" 然后再进行固定尺寸的px设计？

content"width=640,user-scalable=no" 然后再进行固定尺寸的px设计？ 竟然也可以达到自适应的布局在手机上面
咱们不都是通常viewport content="width=device-width么 那么上面这种有没有什么坑呢 ，那么以后我是t content="width=device-width css3媒体查询 还是用content"width=640,user-scalable=no"这样的方法呢 我需要兼容手机浏览器和apk的webview

回复内容：

結論：content"width=640,user-scalable=no" 是一個很好的解決方案，荔枝FM,人人都是播客的移動站使用的就是此方案

固定宽度，viewport 缩放

视觉稿、页面宽度、viewport width 使用统一宽度，利用浏览器自身缩放完成适配。页面样式（包括图像元素）完全按照视觉稿的尺寸，使用定值单位 （px、em）即可完成。

优点：

• 开发简单 缩放交给浏览器，完全按视觉稿切图。
• 还原精准 绝对等比例缩放，可以精准还原视觉稿（不考虑清晰度的情况下）。
• 测试方便 在PC端即可完成大部分测试，手机端只需酌情调整一些细节（比如图标、字体混合排列时，因为字体不同造成的对齐问题）。

存在的问题：

• 像素丢失 对于一些分辨率较低的手机，可能设备像素还未达到指定的 viewport 宽度，此时屏幕的渲染可能就不准确了。比较常见的是边框“消失”了，不过随着手机硬件的更新，这个问题会越来越少的。
• 缩放失效 某些安卓机不能正常的根据 meta 标签中 width 的值来缩放 viewport，需要配合initial-scale 。
• 文本折行 存在于缩放失效的机型中，某些手机为了便于文本的阅读，在文本到达 viewport 边缘（非元素容器的边缘）时即进行折行，而当 viewport 宽度被修正后，浏览器并没有正确的重绘，所以就发现文本没有占满整行。一些常用的段落性文本标签会存在该问题。

缩放失效问题需通过 js 动态设定 initial-scale。

利用 rem 布局

依照某特定宽度设定 rem 值（即 html 的 font-size），页面任何需要弹性适配的元素，尺寸均换算为 rem 进行布局；当页面渲染时，根据页面有效宽度进行计算，调整 rem 的大小，动态缩放以达到适配的效果。利用该方案，还可以根据 devicePixelRatio 设定 initial-scale 来放大 viewport，使页面按照物理像素渲染，提升清晰度。

优点：

• 清晰度高，能达到物理像素的清晰度。
• 能解决 DPR 引起的“1像素”问题。
• 向后兼容较好，即便屏幕宽度增加、PPI 增加该方案依旧适用。

缺点：

• 适配 js 需尽可能早进入，减少（避免）viewport 变化引起的重绘。
• 某些Android机会丢掉 rem 小数部分。
• 需要预编译库进行单位转换。

（轉自MobileWeb 适配总结） 别的不多说了，强烈建议看看前几天刚写的一篇文章：使用Flexible实现手淘H5页面的终端适配 应该能让你找到需要的答案 你在用的可能是:

 <span class="nt"><meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"target-densitydpi=device-dpi,width=640,user-scalable=no"</span> <span class="nt">/></span>

这种做法就本质上是对界面进行线性缩放来适应不同大小的屏幕。对于一定尺寸范围内的设备是可以的。但如果想开发出跨越平板和手机的界面则不太合适。因为手机和平板屏幕尺寸差异太大，会导致缩放太大而是界面元素显得不太和谐。所以最好采用非线性缩放的办法。

<span class="c1">//首先检查浏览器类型</span>
<span class="kd">var</span> <span class="nx">browser</span> <span class="o">=</span> <span class="nx">getBrowser</span><span class="p">();</span>

<span class="k">if</span> <span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">top</span> <span class="o">===</span> <span class="nb">window</span><span class="p">)</span> <span class="p">{</span>
	<span class="kd">var</span> <span class="nx">s</span><span class="p">,</span> <span class="nx">t</span><span class="p">,</span> <span class="nx">sw</span><span class="p">;</span>
	<span class="k">if</span> <span class="p">(</span><span class="nx">browser</span> <span class="o">===</span> <span class="s1">'Gecko'</span><span class="p">)</span> <span class="p">{</span>
		<span class="nx">s</span> <span class="o">=</span> <span class="nx">calcRato</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">min</span><span class="p">(</span><span class="nx">screen</span><span class="p">.</span><span class="nx">width</span><span class="p">,</span> <span class="nx">screen</span><span class="p">.</span><span class="nx">height</span><span class="p">));</span>
		<span class="nb">document</span><span class="p">.</span><span class="nx">write</span><span class="p">(</span><span class="s1">'<meta name="viewport" content="width='</span> <span class="o">+</span> <span class="mi">100</span> <span class="o">/</span> <span class="nx">s</span> <span class="o">+</span> <span class="s1">'%, user-scalable=no, initial-scale='</span> <span class="o">+</span> <span class="nx">s</span> <span class="o">+</span> <span class="s1">'"/>'</span><span class="p">);</span>
	<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">browser</span> <span class="o">===</span> <span class="s1">'Trident'</span><span class="p">)</span> <span class="p">{</span>
		<span class="nb">document</span><span class="p">.</span><span class="nx">write</span><span class="p">(</span><span class="s1">'<meta name="viewport" content="width=device-width, user-scalable=no"/>'</span><span class="p">);</span>
		<span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">zoom</span> <span class="o">=</span> <span class="nx">calcRato</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">min</span><span class="p">(</span><span class="nx">screen</span><span class="p">.</span><span class="nx">width</span><span class="p">,</span> <span class="nx">screen</span><span class="p">.</span><span class="nx">height</span><span class="p">));</span>
	<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
		<span class="nx">t</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">'meta'</span><span class="p">);</span>
		<span class="nx">t</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="s1">'viewport'</span><span class="p">;</span>
		<span class="nx">t</span><span class="p">.</span><span class="nx">content</span> <span class="o">=</span> <span class="s1">'width=device-width, user-scalable=no, initial-scale=1'</span><span class="p">;</span>
		<span class="nb">document</span><span class="p">.</span><span class="nx">head</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">t</span><span class="p">);</span>
		<span class="nx">sw</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">min</span><span class="p">(</span><span class="nx">screen</span><span class="p">.</span><span class="nx">width</span><span class="p">,</span> <span class="nx">screen</span><span class="p">.</span><span class="nx">height</span><span class="p">);</span>
		<span class="k">if</span> <span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">min</span><span class="p">(</span><span class="nx">screen</span><span class="p">.</span><span class="nx">width</span> <span class="o">/</span> <span class="nb">window</span><span class="p">.</span><span class="nx">innerWidth</span><span class="p">,</span> <span class="nx">screen</span><span class="p">.</span><span class="nx">height</span> <span class="o">/</span> <span class="nb">window</span><span class="p">.</span><span class="nx">innerHeight</span><span class="p">)</span> <span class="o">></span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
			<span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">zoom</span> <span class="o">=</span> <span class="nx">calcRato</span><span class="p">(</span><span class="nx">sw</span> <span class="o">/</span> <span class="nx">devicePixelRatio</span><span class="p">);</span>
		<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
			<span class="nx">s</span> <span class="o">=</span> <span class="nx">calcRato</span><span class="p">(</span><span class="nx">sw</span><span class="p">);</span>
			<span class="nx">t</span><span class="p">.</span><span class="nx">content</span> <span class="o">=</span> <span class="s1">'width='</span> <span class="o">+</span> <span class="mi">100</span> <span class="o">/</span> <span class="nx">s</span> <span class="o">+</span> <span class="s1">'%, user-scalable=no, initial-scale='</span> <span class="o">+</span> <span class="nx">s</span><span class="p">;</span>
		<span class="p">}</span>
	<span class="p">}</span>
<span class="p">}</span>

<span class="kd">function</span> <span class="nx">calcRato</span><span class="p">(</span><span class="nx">sw</span><span class="p">)</span> <span class="p">{</span>
	<span class="c1">//离散放大级别</span>
	<span class="kd">var</span> <span class="nx">step</span> <span class="o">=</span> <span class="mf">0.125</span><span class="p">;</span>
	<span class="c1">//基准宽度为320px</span>
	<span class="kd">var</span> <span class="nx">zoom</span> <span class="o">=</span> <span class="nx">sw</span> <span class="o">/</span> <span class="mi">320</span><span class="p">;</span>
	<span class="c1">//放大时不使用线性算法</span>
	<span class="k">if</span> <span class="p">(</span><span class="nx">zoom</span> <span class="o">></span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
		<span class="nx">zoom</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">sqrt</span><span class="p">(</span><span class="nx">zoom</span><span class="p">)</span> <span class="o">/</span> <span class="nx">step</span><span class="p">)</span> <span class="o">*</span> <span class="nx">step</span><span class="p">;</span>
	<span class="p">}</span>
	<span class="k">return</span> <span class="nx">zoom</span><span class="p">;</span>
<span class="p">}</span>

对，我也是用这种方法比较方便。不过由于宽高等比缩放后，在元素定位布局时很多手机的屏幕就不够高，因此还是得媒体查询做些细节上的调节 用过这种代码写hybrid app效果还行，核心区别就在于它没有媒体查询，手机，平板都长一个样，等比缩放不仔细看效果也不差（毕竟会变形），如果你只需要开发个大部分机型适配的页面，我觉得这么写挺好

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn