content"width=640,user-scalable=no" 然後再進行固定尺寸的px設計？

content"w=640,user-scalable=no" 然後再進行固定尺寸的px設計？ 竟然也可以達到自適應的布局在手機上面

咱們不都是通常viewport content="w=device-width么 那麼上面這種有沒有什麼坑呢 ，那麼以後我是t content="w=device-width css3媒體查詢 還是用content"w=640,user-scalable=no"這樣的方法呢 我需要兼容手機瀏覽器和apk的webview

---

別的不多說了，強烈建議看看前幾天剛寫的一篇文章：使用Flexible實現手淘H5頁面的終端適配 應該能讓你找到需要的答案

---

結論：content"w=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 適配總結）

---

這種做法就本質上是對界面進行線性縮放來適應不同大小的屏幕。對於一定尺寸範圍內的設備是可以的。但如果想開發出跨越平板和手機的界面則不太合適。因為手機和平板屏幕尺寸差異太大，會導致縮放太大而是界面元素顯得不太和諧。所以最好採用非線性縮放的辦法。

//首先檢查瀏覽器類型
var browser = getBrowser();

if (window.top === window) {
var s, t, sw;
if (browser === "Gecko") {
s = calcRato(Math.min(screen.width, screen.height));
document.write("&");
} else if (browser === "Trident") {
document.write("&");
document.documentElement.style.zoom = calcRato(Math.min(screen.width, screen.height));
} else {
t = document.createElement("meta");
t.name = "viewport";
t.content = "w=device-width, user-scalable=no, initial-scale=1";
document.head.appendChild(t);
sw = Math.min(screen.width, screen.height);
if (Math.min(screen.width / window.innerWidth, screen.height / window.innerHeight) &> 1) {
document.documentElement.style.zoom = calcRato(sw / devicePixelRatio);
} else {
s = calcRato(sw);
t.content = "w=" + 100 / s + "%, user-scalable=no, initial-scale=" + s;
}
}
}

function calcRato(sw) {
//離散放大級別
var step = 0.125;
//基準寬度為320px
var zoom = sw / 320;
//放大時不使用線性演算法
if (zoom &> 1) {
zoom = Math.floor(Math.sqrt(zoom) / step) * step;
}
return zoom;
}


---

對，我也是用這種方法比較方便。不過由於寬高等比縮放後，在元素定位布局時很多手機的屏幕就不夠高，因此還是得媒體查詢做些細節上的調節

---

用過這種代碼寫hybrid app效果還行，核心區別就在於它沒有媒體查詢，手機，平板都長一個樣，等比縮放不仔細看效果也不差（畢竟會變形），如果你只需要開發個大部分機型適配的頁面，我覺得這麼寫挺好

---

推薦閱讀：