我的移動端網(wǎng)頁開發(fā)方案

時間：2023-09-24 13:30:01 | 來源：網(wǎng)站運營

時間：2023-09-24 13:30:01 來源：網(wǎng)站運營

我的移動端網(wǎng)頁開發(fā)方案：開發(fā)移動端網(wǎng)頁會遇到很多問題，縮放問題、屏幕的物理像素與實際像素、不同尺寸的屏幕、被延遲的點擊事件、響應(yīng)點擊的元素出現(xiàn)灰色的背景、不靈敏的滾動事件、丑陋的1px線條、鎖不死的滾動條等等吧。解決方法有很多，這里只會列出舒適的方案，不增加工作成本。

縮放問題

網(wǎng)頁在移動端瀏覽器可以進行縮放，默認元素,字體會非常小，一個屏幕會看不到整個頁面，需要左右看完整的頁面。方案：在header標(biāo)簽下添加

<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">初始化縮放1，最大縮放1，最小縮放1，禁止用戶縮放網(wǎng)頁

物理像素和實際像素

手機有普通屏，雙倍屏，三倍屏。雙倍屏，三倍屏呈現(xiàn)網(wǎng)頁會出現(xiàn)1px線條會變粗。網(wǎng)頁中最小字體大小是12px。如果視覺稿上出現(xiàn)11px的字體，無法還原視覺稿。

理論上說寫1px到雙倍屏上會用兩個像素顯示，三倍屏上會用三個像素顯示，視覺上會變清晰，不知道為什么對于1px的線條并沒有變清晰，而是變粗了，變難看了。

一般UED出的視覺稿是按照雙倍屏出的，視覺的寬度會是實際手機寬度的2倍，給前端帶來麻煩，需要先計算除以2，再寫布局。




方案：

<meta name="viewport" content="width=device-width,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">初始化縮放.5，最大縮放.5，最小縮放.5

無論在雙倍屏，三倍屏下1px完美顯示，視覺切圖也不需要做除以2計算，直接寫視覺稿上的像素就可以，11px的字體在視覺上是22px,自然超過最小限制。


scale=0.5和scale=1 1px像素對比

不同尺寸的屏幕

很多人會用rem的方案，在寬的屏幕下變大，窄的屏幕下變小，就好像網(wǎng)頁縮放一樣的效果。但自適應(yīng)不同尺寸的屏幕并不是網(wǎng)頁簡單的縮放。

跟UED溝通的方案是：

1. 高度不變寬度自適應(yīng)
2. 字體大小不變
3. 間距固定
4. 特殊場景特殊處理

網(wǎng)頁布局就用不到rem了，好處就是不用做換算了，視覺上是什么手機上什么。寬度自適應(yīng)用flex布局來做，經(jīng)測試部分手機瀏覽器需要加(-webkit-)前綴來兼容。

被延遲的點擊事件 & 灰色背景

給一個元素綁定click，點擊事件響應(yīng)慢，并且出現(xiàn)灰色背景。
無痛解決方案：

點擊的元素{ /*清除click延遲*/-ms-touch-action: manipulation;-webkit-touch-action: manipulation;touch-action: manipulation;-webkit-appearance:none; /*清除灰色背景*/}

鎖死滾動條

單純的給body設(shè)置

overflow: hidden;height: 100%在IOS下不起作用，必須html,body都設(shè)置才會起作用。

不靈敏的滾動事件

我并沒有完美的解決。body綁定onScroll事件，在IOS下不靈敏，window綁定onScroll事件，在一些雜牌瀏覽器上不靈敏。兩害取其輕。




這里只想用一些無痛的解決方案，最好是瀏覽器本身可以解決的，通過樣式，通過某個屬性設(shè)置。人生苦短莫要太糾結(jié)，最后奉上我用的移動網(wǎng)頁reset.css




::-ms-clear, ::-ms-reveal{display: none;}html { color:#000; background:#f1f1f1;}body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,fieldset,lengend,button,input,textarea,form,th,td { margin:0; padding:0; font-weight: normal;}body{ background: #f1f1f1;}html { -webkit-overflow-scrolling: touch;}input::-webkit-search-decoration,input::-webkit-search-cancel-button { display: none;}body { -webkit-overflow-scrolling: touch;}input[type="search"]{-webkit-appearance:none;}a,input,button,i,li,div,span,em { -webkit-tap-highlight-color: rgba(255,255,255,0); -ms-touch-action: manipulation; -webkit-touch-action: manipulation; touch-action: manipulation; -webkit-appearance:none; outline: none; border:none;}body,button,input,select,textarea{ line-height: 1.5; color: #353535; outline: 0px; -webkit-appearance:none; font-size: 12px; font-family: sans-serif;}h1,h2,h3,h4,h5,h6 { font-size:100%;}address,cite,dfn,em,var { font-style:normal;}code,kbd,pre,samp,tt { line-height: 1.5; color: #353535; font-size: 12px; font-family: sans-serif;}small { font-size:12px;}ul,ol { list-style:none;}a { text-decoration:none; color: inherit;}a:hover { text-decoration:none; color: #316ccb;}abbr[title],acronym[title] { border-bottom:1px dotted; cursor:help;}q:before,q:after { content:'';}:focus { outline:0;}legend { color:#000;}fieldset,img { border:none;}button,input,select,textarea { font-size:100%;}table { border-collapse:collapse; border-spacing:0;}hr { border:none; height:1px; *color:#fff;}img { -ms-interpolation-mode:bicubic;}


上面這些足以在短時間內(nèi)提高用戶體驗了。O(∩_∩)O~