1.從時間成本來說,移動端的開發最耗時的是尺寸即解析度,為了解決解析度問題,我們要先理清幾個關鍵性概念
window.innerwidth //980
"viewport" content=
"width=device-width,initial-scale=1,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
>
理解viewport的作用只要了解viewport的寬高相當於html的寬高,而決定viewport的寬高有兩種演算法,一是width=device-width,viewport的寬高和裝置的css畫素相等;另乙個是initial-scale=1 通過設定縮放比,使用公式viewport寬度 = css畫素 / 縮放比;同時設定兩者的時候,取大的,當然額外提示,縮放比設定後是縮放整個html
width=device-width 是指viewport的寬等於裝置的css畫素寬度,initial-scale=1 即縮放比 = css畫素寬度 / viewport寬度, 而兩種計算viewport的方法中css畫素寬度都是物理畫素 / dpr算出來的,只要dpr不變css畫素就不變,所以viewport的大小取決於縮放比的設定。
body
input,a,button
input,button
divinput::-webkit-input-placeholder
input:focus::-webkit-input-placeholder
無非就是設定寬高的時候使用50%之類的,這個沒什麼好說的,但是一般使用來說不會單獨使用,多數和其他布局一塊使用
(
function()
)()// 通過一開始的時候設定縮放值為1,
// 通過當前的html頁面的寬度為裝置的css畫素寬度,
// 得到裝置的css畫素寬度之後除目標的viewport值得出縮放比,
// 然後再更改縮放比,使頁面縮放成目標頁面的大小
// 缺點是頁面大小不變,就算是ipad頁面也和iphone6的展示大小一樣
viewport適配的好處是這樣就只需將頁面的元素按照iphone6的頁面去設定就行了,缺點也很明顯,所有裝置的頁面都被設定成iphone6那麼大 移動端前端開發與pc端前端開發的區別
關於移動端 另外寫幾點響應螢幕大小的建議和方法 1 由於現在手機螢幕多種多樣,想要相容所有裝置所需要開發的經驗必須非常豐富,對設計師的要求也非常高,如果是初學或者開發經驗較少,可將裝置分為手機 平板 pc三種頁面來寫。2 寬度的響應 寬度的響應最近使用的最多的就是類似以下這種寫法 width cal...
前端 移動端適配
參考部落格 移動前端自適應適配布局解決方案 使用flex彈性布局,元素寬度自適應,高度固定為某個px值。這種適配方式是以html的font size值為基礎,所有元素的畫素大小都使用rem表示 除了font size以外 固定視口,縮放值為1.0 計算基礎font size值font size值的計...
移動前端開發
去掉輸入url控制項條 window.onload function script html,body body a,img mdn 手機網頁開發 mdn 在移動瀏覽器中使用viewport元標籤控制布局 移動前端開發和 web 前端開發的區別是什麼 移動前端端開發的入門理論 alloyteam移動...