移動端web開發的一些知識點

時間 2019-12-02

標籤移動 web 開發一些知識欄目無線简体版

原文原文鏈接

整理一下本身平時移動端web開發中遇到的問題，也參考一下前輩的一些總結css

一、最多見的要數1像素邊框了html

由於Retine屏的分辨率始終是普通屏幕的2倍，1px的邊框在dpr=2的retina屏下會顯示成2px。前端

但在IOS8中，已經支持0.5px了，那就意味着, 在devicePixelRatio=2的時候，咱們可使用css設置爲0.5。css3

平時用的比較多的也是使用transform了：git

div{
    height:1px;
    background:#000;
    -webkit-transform: scaleY(0.5);
    -webkit-transform-origin:0 0;
    overflow: hidden;
}

可參考：github

走向視網膜（Retina）的Web時代web

移動web 1像素邊框瞧瞧大公司是怎麼作的segmentfault

二、CSS Sticky Footer佈局瀏覽器

大概就是這個意思：若是頁面內容不夠長的時候，頁腳塊粘貼在視窗底部；若是內容足夠長時，頁腳塊會被內容向下推送。移動端web

經過設置margin-top、padding-bottom來實現

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        html, body, #wrap {height: 100%;margin: 0;padding: 0}
        body > #wrap {height: auto; min-height: 100%;background-color: blue;}
        #main {padding-bottom: 150px;} 
        #footer {position: relative;margin-top: -150px; height: 150px;clear:both;background-color: red;}
    </style>
</head>
<body>
<div id="wrap">
    <div id="main" class="clearfix">
        <div id="content"></div>
        <div id="side"></div>
    </div>
</div>
<div id="footer">
</div>
</body>
</html>

若是主體是使用懸浮佈局，還得解決一些瀏覽器的兼容問題（清除浮動）。

參考：

CSS祕密花園： Sticky foote

三、flex佈局

只能說flex佈局真的很好用

移動端全兼容的flexbox速成班

flex

四、移動端的meta

移動前端開發中添加一些webkit專屬的HTML5頭部標籤，幫助瀏覽器更好解析html代碼，更好地將移動web前端頁面表現出來。讓普通移動網頁被添加到主屏幕後，擁有一些類native的功能

能夠查看天貓、淘寶、網易、京東、百度等等移動端的一些設置

HTML head 頭標籤

五、移動端跟PC端的區別

適配不一樣大小的屏幕；
兼容安卓的衆多版本；
有些css屬性在手機上會不生效
手機上click事件有延遲

能夠說：移動端須要關注的主要是瀏覽器；視口；事件等等。

關於瀏覽器：

iOS下的瀏覽器就不用多說了，是由於iOS下的瀏覽器相對安卓而言不混亂。並且，蘋果不容許安裝其餘渲染引擎。不過基於代理瀏覽器的特性，蘋果上能夠安裝代理瀏覽器（但也不是全部代理瀏覽器均可以）。因此在蘋果手機上測試web頁面時，咱們通常測試Safari瀏覽器便可，必要時能夠測試代理瀏覽器。

對於安卓的話，Web開發者在面對安卓時遇到的問題是，不像其它平臺，安卓的內置瀏覽器的狀況很複雜，受到多方面因素的影響，正如前面所提到的，就瀏覽器而言，不一樣的廠商，不一樣的品牌手機，不一樣的操做系統，不一樣的內置瀏覽器，甚至同一種瀏覽器的不一樣版本都有可能對於移動端的某一些樣式或事件的支持不一樣。而安卓平臺的開放性，讓更多的手機廠商，瀏覽器廠商均可以開發本身的一個瀏覽器來增長設備或操做平臺的價值。這也就造就了安卓市場下的各瀏覽器的繁複和差別化。（例如，兩個不一樣手機廠商的內置瀏覽器在針對同一個web樣式上作了不一樣優化處理）。不過還好，大多數都是基於webkit，可是測試的時候仍是要在主流的瀏覽器都測試一下。

參考：http://www.cnblogs.com/chunyangji/archive/2016/08/16/5776692.html