機(jī)app個(gè)人中心頁(yè)面模板源碼

app 內(nèi)嵌H5頁(yè)面，個(gè)人中心頁(yè)面模板，包含列表按鈕圖片 icon 搜索布局上傳對(duì)話框。

手機(jī)演示地址：http://www.17sucai.com/preview/10221/2017-01-20/ceshi/index.html — my-read.html — my-secure.html — my-put.html — my-up.html

html5 css3手機(jī)app登錄頁(yè)面模板下載

手機(jī)演示地址：http://www.17sucai.com/pins/demoshow/22887

藍(lán)色的采購(gòu)信息管理系統(tǒng)手機(jī)界面wap模板

手機(jī)版大氣信息管理系統(tǒng)界面模板

手機(jī)演示地址：http://www.17sucai.com/pins/demoshow/22475

藍(lán)色通用的手機(jī)app登錄注冊(cè)頁(yè)面模板

藍(lán)色的手機(jī)登錄模板

手機(jī)演示地址：http://www.17sucai.com/pins/demoshow/22480

蘋(píng)果ios風(fēng)格企業(yè)博客網(wǎng)站手機(jī)模板

蘋(píng)果風(fēng)格

手機(jī)演示地址：http://www.17sucai.com/pins/demoshow/20946

著攜帶設(shè)備的越來(lái)越普及，移動(dòng)端項(xiàng)目會(huì)越來(lái)越多的接觸。所以想給大家介紹一下移動(dòng)端適配那點(diǎn)事。#前端#

像素（Pel, pixel, pictureelement）

手機(jī)物理像素點(diǎn)

每個(gè)像素都是由三原色組成的單元。

1080*1920就是橫向1080 縱向1920個(gè)物理像素點(diǎn)。

隨著手機(jī)發(fā)展從 720p 1080p 到現(xiàn)在的 2k 4k，邏輯上如果手機(jī)分辨率翻倍，豈不是之前的網(wǎng)頁(yè)都縮小成一半了，不能迭代一次開(kāi)發(fā)一次吧。為了解決這個(gè)問(wèn)題，就引申出 邏輯分辨率 的概念了

邏輯分辨率（設(shè)備獨(dú)立像素）

設(shè)備獨(dú)立像素(Density-independent Pixel, DIP) 又稱密度無(wú)關(guān)像素。這個(gè)點(diǎn)代表一個(gè)可以由程序使用的虛擬像素。就比如以前 360p 屏幕（寬360個(gè)物理像素高640個(gè)物理像素）的時(shí)候，你的 1px（一個(gè)邏輯分辨率）定位一個(gè) 物理像素點(diǎn)。等到了 720p（寬720個(gè)物理像素高1280個(gè)物理像素）的時(shí)候 1px 定位 2*2個(gè)物理像素點(diǎn)

程序虛擬像素與物理像素的對(duì)應(yīng)關(guān)系

PPI超過(guò)326的屏幕就是 視網(wǎng)膜屏幕（Retina）#iPhone#

PPI計(jì)算方法

設(shè)備像素比(Device Pixel Ratio, DPR)

設(shè)備像素圖

上面設(shè)備列表圖中的 Dpr算法：

設(shè)備像素比(DPR) ＝物理像素(DP) / 設(shè)備獨(dú)立像素(DIP)

這樣關(guān)系就清楚了很多，通俗的說(shuō) 1個(gè)css程序像素占用多少設(shè)備像素

這個(gè)數(shù)值一般都用在多倍圖中，就是UI切圖，經(jīng)常會(huì)有一倍圖，二倍圖（@2x），三倍圖(@3x)。

因?yàn)閳D片也是由像素點(diǎn)組成的，如果Dpr為3 ，100*100px 的img 元素，就應(yīng)該放入一張實(shí)際寬高 300*300 的圖片，這樣才能清楚的展示。如果放入100*100 的圖片，沒(méi)有占滿的像素點(diǎn)，會(huì)通過(guò)算法去取附近點(diǎn)的顏色，圖就會(huì)模糊。放600*600 的圖，多出的像素點(diǎn)會(huì)通過(guò)算法取平均色，圖就會(huì)鈍化。

Viewport（視口）

一般認(rèn)為移動(dòng)設(shè)備上有 三個(gè) viewport

layout viewport

移動(dòng)端瀏覽器的默認(rèn)布局視口，可以通過(guò) document.documentElement.clientWidth 來(lái)獲取。

移動(dòng)設(shè)備流行之前，pc網(wǎng)頁(yè)大行其道，一開(kāi)始為了讓所有網(wǎng)站正常顯示，移動(dòng)端瀏覽器就決定默認(rèn)情況下把viewport 設(shè)為一個(gè)較寬的值（980px）。這樣pc端的網(wǎng)站也可以在手機(jī)上正常顯示。

visual viewport

代表瀏覽器可視區(qū)域的大小，可以通過(guò) window.visualViewport 來(lái)獲取

ideal viewport

最理想的 viewport ，寬高等于設(shè)備屏幕的物理寬高，剔除了分辨率的干擾，針對(duì)同一 ideal viewport 設(shè)備開(kāi)發(fā)的網(wǎng)站，都將完美呈現(xiàn)。

理想視口可以用過(guò) meta標(biāo)簽去實(shí)現(xiàn)

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">

寬度等于設(shè)備寬度，初始頁(yè)面縮放1倍（就是不縮放），最小最大縮放1倍，禁止用戶縮放

最后這個(gè) viewport-fit=cover 是針對(duì)iphone劉海屏的，劉海跟ios底部操作欄會(huì)使網(wǎng)頁(yè)不能全屏

淘寶移動(dòng)端meta設(shè)置

<meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no,email=no" name="format-detection">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">

移動(dòng)端適配歷史

原始不適配 -- viewport控制縮放 -- 媒體查詢 -- 響應(yīng)式布局 -- 移動(dòng)端分流 -- Rem

移動(dòng)端分流

移動(dòng)端分流原理，主要是通過(guò) UA（User Agent用戶代理）去判斷上網(wǎng)設(shè)備, 比如移動(dòng)端輸入 pc網(wǎng)址 https://www.toutiao.com/，就會(huì)跳轉(zhuǎn)到 https://m.toutiao.com/ （移動(dòng)端適配地址）。

附上判斷的js代碼

function IsPC() {
    var userAgentInfo = navigator.userAgent;
    var Agents = ["Android", "iPhone",
                "SymbianOS", "Windows Phone",
                "iPad", "iPod"];
    var flag = true;
    for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
            flag = false;
            break;
        }
    }
    return flag;
}

Rem

現(xiàn)在項(xiàng)目適配使用的是 vw + rem

rem（font size of the root element）是指相對(duì)于根元素（html）的字體大小的單位。
vw是可視窗口的寬度單位，不受設(shè)備分辨率影響, width: 1vw 等于 width: 1%。倘若瀏覽器寬1000px，1vw = 10px

移動(dòng)設(shè)備的原型圖一般都是二倍圖（寬750px）

現(xiàn)在移動(dòng)互聯(lián)網(wǎng)的發(fā)展，現(xiàn)在很多企業(yè)做網(wǎng)站開(kāi)發(fā)不僅是電腦端的網(wǎng)站，還包括了移動(dòng)端網(wǎng)站的開(kāi)發(fā)，移動(dòng)端網(wǎng)站開(kāi)發(fā)和pc端是有一定的區(qū)別，比如移動(dòng)端的頁(yè)面更小，移動(dòng)端的打開(kāi)和加載速度都遠(yuǎn)低于電腦端訪問(wèn)網(wǎng)站，其實(shí)除過(guò)這兩點(diǎn)，pc端網(wǎng)站的建設(shè)和移動(dòng)端網(wǎng)站開(kāi)發(fā)都是有很多的區(qū)別，今天我們一起來(lái)了解下。

移動(dòng)端網(wǎng)站和pc端的網(wǎng)站在設(shè)計(jì)風(fēng)格上是不太一樣的，很多人說(shuō)手機(jī)站不就是pc站的縮小版么，為什么還要不一樣？這里大家要注意，手機(jī)網(wǎng)站和pc網(wǎng)站的像素大小不同，另外一點(diǎn)就是手機(jī)屏幕操作和電腦操作是不一樣的，所以有些功能電腦網(wǎng)站操作很簡(jiǎn)單，但是手機(jī)站操作很麻煩，所以手機(jī)網(wǎng)站開(kāi)發(fā)就不能全部抄pc端網(wǎng)站。

另外一點(diǎn)就是手機(jī)網(wǎng)站開(kāi)發(fā)語(yǔ)言和pc端網(wǎng)站是不一樣的，以前手機(jī)網(wǎng)站的語(yǔ)言是HTML寫(xiě)的，而現(xiàn)在已經(jīng)采用了HTML5技術(shù)，可以自適應(yīng)所有尺寸的手機(jī)屏幕，有著更強(qiáng)大的網(wǎng)頁(yè)表現(xiàn)能力，也優(yōu)于其他前端語(yǔ)言的aeo性能，讓企業(yè)能把握住移動(dòng)搜索引擎的流量入口。而css3的技術(shù)可以讓手機(jī)網(wǎng)站的布局字體、顏色和背景有更炫麗的效果。

做好手機(jī)網(wǎng)站的建設(shè)也更方便用戶去看，如果一個(gè)企業(yè)只有一個(gè)電腦端網(wǎng)站，沒(méi)有一個(gè)手機(jī)端的網(wǎng)站，那么手機(jī)訪問(wèn)的話打開(kāi)網(wǎng)站的頁(yè)面就是不完整的，因?yàn)槭謾C(jī)訪問(wèn)電腦網(wǎng)站是在是太大了，所以需要縮放，而如果有手機(jī)網(wǎng)站的話，就會(huì)自適應(yīng)成更適合手機(jī)網(wǎng)站訪問(wèn)的頁(yè)面，這樣看起來(lái)就更加的清楚，也更加的方便，這就是手機(jī)網(wǎng)站建設(shè)的重要性，如果企業(yè)要做移動(dòng)端營(yíng)銷，那么手機(jī)網(wǎng)站建設(shè)是很有必要的。

在線咨詢

上一篇：蘋(píng)果Safari瀏覽器支持“垂直表單控件”，可實(shí)現(xiàn)語(yǔ)言文段豎排
下一篇：CSS3清除浮動(dòng)