communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > Tutoriel H5 > content"width=640,user-scalable=no" 然后再进行固定尺寸的px设计？

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

WBOY
Libérer： 2016-06-07 08:43:32
original
3163 Les gens l'ont consulté

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页面的终端适配 应该能让你找到需要的答案 你在用的可能是:
<code class="language-html"> <span class="nt"><meta> <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></code>
Copier après la connexion
这种做法就本质上是对界面进行线性缩放来适应不同大小的屏幕。对于一定尺寸范围内的设备是可以的。但如果想开发出跨越平板和手机的界面则不太合适。因为手机和平板屏幕尺寸差异太大，会导致缩放太大而是界面元素显得不太和谐。所以最好采用非线性缩放的办法。

<code class="language-js"><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>
</code>
Copier après la connexion
对，我也是用这种方法比较方便。不过由于宽高等比缩放后，在元素定位布局时很多手机的屏幕就不够高，因此还是得媒体查询做些细节上的调节 用过这种代码写hybrid app效果还行，核心区别就在于它没有媒体查询，手机，平板都长一个样，等比缩放不仔细看效果也不差（毕竟会变形），如果你只需要开发个大部分机型适配的页面，我觉得这么写挺好
Étiquettes associées：
content device user width
source：php.cn
Article précédent：W3C 为什么工作效率很低？ Article suivant：本人想去培训机构学习编程，培训html5 还是 ios 还是安卓好呢？
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Déplacez le contenu vers la gauche en ajoutant la propriété Largeur J'ai prévu des marges au corps. main {gauche marge : 200px ; marge droite : 200px ; aligne...
Depuis 2024-04-06 22:01:35
0
3
816
Existe-t-il un moyen de forcer le texte de la flexbox à être centré verticalement, quel que soit l'autre code CSS dont nous disposons ? J'ai le code CSS suivant qui fait partie d'un code CSS plus vaste utilisé dans un site Web...
Depuis 2024-04-06 20:41:51
0
1
518
Afficher les panneaux latéraux masqués : coché J'aimerais avoir un menu de navigation dans le panneau latéral avec la possibilité de pass...
Depuis 2024-04-06 15:49:33
0
1
319
Electron obtient AppData en préchargement Comment obtenir le répertoire AppData préchargé ? Background.js[...]asyncfunctioncreateWin...
Depuis 2024-04-06 11:05:31
0
1
417
Les styles SASS ont priorité sur les requêtes multimédias J'essaie d'utiliser des requêtes multimédias pour remplacer les styles des appareils de bu...
Depuis 2024-04-05 15:03:00
0
1
3396
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal