淘宝的flexible适配方案为什么只对iOS进行dpr判断，对于Android始终认为其dpr为1？

<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">dpr</span> <span class="o">&amp;&amp;</span> <span class="o">!</span><span class="nx">scale</span><span class="p">)</span> <span class="p">{</span>
        <span class="kd">var</span> <span class="nx">isAndroid</span> <span class="o">=</span> <span class="nx">win</span><span class="p">.</span><span class="nx">navigator</span><span class="p">.</span><span class="nx">appVersion</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="sr">/android/gi</span><span class="p">);</span>
        <span class="kd">var</span> <span class="nx">isIPhone</span> <span class="o">=</span> <span class="nx">win</span><span class="p">.</span><span class="nx">navigator</span><span class="p">.</span><span class="nx">appVersion</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="sr">/iphone/gi</span><span class="p">);</span>
        <span class="kd">var</span> <span class="nx">devicePixelRatio</span> <span class="o">=</span> <span class="nx">win</span><span class="p">.</span><span class="nx">devicePixelRatio</span><span class="p">;</span>
        <span class="k">if</span> <span class="p">(</span><span class="nx">isIPhone</span><span class="p">)</span> <span class="p">{</span>
            <span class="c1">// iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案</span>
            <span class="k">if</span> <span class="p">(</span><span class="nx">devicePixelRatio</span> <span class="o">&gt;=</span> <span class="mi">3</span> <span class="o">&amp;&amp;</span> <span class="p">(</span><span class="o">!</span><span class="nx">dpr</span> <span class="o">||</span> <span class="nx">dpr</span> <span class="o">&gt;=</span> <span class="mi">3</span><span class="p">))</span> <span class="p">{</span>                
                <span class="nx">dpr</span> <span class="o">=</span> <span class="mi">3</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">devicePixelRatio</span> <span class="o">&gt;=</span> <span class="mi">2</span> <span class="o">&amp;&amp;</span> <span class="p">(</span><span class="o">!</span><span class="nx">dpr</span> <span class="o">||</span> <span class="nx">dpr</span> <span class="o">&gt;=</span> <span class="mi">2</span><span class="p">)){</span>
                <span class="nx">dpr</span> <span class="o">=</span> <span class="mi">2</span><span class="p">;</span>
            <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
                <span class="nx">dpr</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span>
            <span class="p">}</span>
        <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
            <span class="c1">// 其他设备下，仍旧使用1倍的方案</span>
            <span class="nx">dpr</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="nx">scale</span> <span class="o">=</span> <span class="mi">1</span> <span class="o">/</span> <span class="nx">dpr</span><span class="p">;</span>
    <span class="p">}</span>

回复内容：

淘宝在设置initial-scale（屏幕缩放比）的同时使用的是rem的方式设置各种尺寸大小

<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">"width=divece-width,initial-scale=1,user-scalable=no"</span><span class="nt">/&gt;</span>
</span></code>

登录后复制

因为Android设备的兼容问题太过复杂，Android Pad 和 中兴 等国产 Android 机有很多奇葩的BUG，比如：

• viewport content 的写法要兼容各种奇葩 Android 设备，兼容测试的成本很高
• 部分机型修改viewport之后产生屏幕抖动
• 部分机型 WebView Width 与屏幕实际宽度不一致
  
• 还有很多无法预料到的奇葩BUG存在

故统一对 Android 设备进行 dpr = 1 处理。

同时 flexible 是 2014年5月诞生的，国内的大前端对于移动端的经验还不算成熟，而手机淘宝能有这种思路，已经是非常厉害的一个方案！

顺便说点不相关的：

1. 上述的几个小点的问题，后来阿里也有别的同学解决了，但方案并未开源
   
2. 我们团队的方案是不对 viewport 进行缩放处理，仅根据 width 在 html 添加 font-size
3. 对于1px 边框的处理是进行特性检查，对于支持的容器直接就写 border-width：0.5px

<code class="language-js"><span class="k">if</span> <span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">devicePixelRatio</span> <span class="o">&amp;&amp;</span> <span class="nx">devicePixelRatio</span> <span class="o">&gt;=</span> <span class="mi">2</span><span class="p">)</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">docElem</span>  <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span><span class="p">;</span>
    <span class="kd">var</span> <span class="nx">testElem</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">'div'</span><span class="p">);</span>
    <span class="kd">var</span> <span class="nx">fakeBody</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">'body'</span><span class="p">);</span>
    <span class="kd">var</span> <span class="nx">refNode</span>  <span class="o">=</span> <span class="nx">docElem</span><span class="p">.</span><span class="nx">firstElementChild</span> <span class="o">||</span> <span class="nx">docElem</span><span class="p">.</span><span class="nx">firstChild</span><span class="p">;</span>
    <span class="nx">testElem</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">border</span> <span class="o">=</span> <span class="s1">'.5px solid transparent'</span><span class="p">;</span>
    <span class="nx">fakeBody</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">testElem</span><span class="p">);</span>
    <span class="nx">docElem</span><span class="p">.</span><span class="nx">insertBefore</span><span class="p">(</span><span class="nx">fakeBody</span><span class="p">,</span> <span class="nx">refNode</span><span class="p">);</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">testElem</span><span class="p">.</span><span class="nx">offsetHeight</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">querySelector</span><span class="p">(</span><span class="s1">'html'</span><span class="p">).</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="s1">'hairlines'</span><span class="p">);</span>
    <span class="p">}</span>
    <span class="nx">docElem</span><span class="p">.</span><span class="nx">removeChild</span><span class="p">(</span><span class="nx">fakeBody</span><span class="p">);</span>
<span class="p">}</span>
</code>

登录后复制

issue中有人提过这个问题 一些安卓厂商给定的dpr值并不准确