h5網頁適配js下載（h5 css js）

本文目錄一覽：

• 1、h5.jsltdd怎麼下載
• 2、javascript h5 app（react.js）中如何下載附件（url鏈接形式）並在新窗口中打開附件?
• 3、iphone端的H5頁面怎麼適配iphone5-7p
• 4、移動端H5頁面適配問題研究
• 5、html5, js實現安卓手機在微信瀏覽器中下載APP問題，如圖

h5.jsltdd怎麼下載

1、首先，選則打開自帶瀏覽器。

2、其次，在瀏覽器中搜索h5.js1tdd。

3、最後，會在瀏覽器中彈出界面，點擊正常下載即可。

javascript h5 app（react.js）中如何下載附件（url鏈接形式）並在新窗口中打開附件?

我們只要用content創建一個ObjectURL並賦值給aLink即可解決文件類型的限制問題。

文件的自動下載也挺好辦，自己構建一個UI點擊事件，再自動觸發下，就能實現自動下載啦。

現在來看看最終代碼：

代碼如下:

function downloadFile(fileName, content){

var aLink = document.createElement(‘a’);

var blob = new Blob([content]);

var evt = document.createEvent(“HTMLEvents”);

evt.initEvent(“click”, false, false);//initEvent 不加後兩個參數在FF下會報錯, 感謝 Barret Lee 的反饋

aLink.download = fileName;

aLink.href = URL.createObjectURL(blob);

aLink.dispatchEvent(evt);

}

現在，只要一調用downloadFile，文件就自動下載了

iphone端的H5頁面怎麼適配iphone5-7p

一、移動端一些概念視覺稿 （選取一款手機的屏幕寬高作為基準）在前端開發之前，視覺 MM會給我們一個psd文件，稱之為視覺稿。對於移動端開發而言，為了做到頁面高清的效果，視覺稿的規範往往會遵循以下兩點：1）首先，選取一款手機的屏幕寬高作為基準(以前是iPhone4 的320×480，現在更多的是iphone6的 375×667)。2）對於retina 屏幕(如: dpr=2)，為了達到高清效果，視覺稿的畫布大小會是基準的2 倍，也就是說像素點個數是原來的 4倍（對 iphone6而言：原先的 375×667，就會變成 750×1334）。問題：對於 dpr=2的手機，為什麼畫布大小×2，就可以解決高清問題？對於 2倍大小的視覺稿，在具體的 css編碼中如何還原每一個區塊的真實寬高(也就是布局問題)?標註稿移動端尺寸物理像素(physical pixel)一個物理像素是顯示器(手機屏幕)上最小的物理顯示單元，在操作系統的調度下，每一個設備像素都有自己的顏色值和亮度值。設備獨立像素(density-independent pixel)設備獨立像素(也叫密度無關像素)，可以認為是計算機坐標系統中得一個點，這個點代表一個可以由程序使用的虛擬像素(比如: css像素)，然後由相關係統轉換為物理像素。設備像素比(device pixel ratio)設備像素比(簡稱 dpr)定義了物理像素和設備獨立像素的對應關係，它的值可以按如下的公式的得到： 設備像素比 =物理像素 /設備獨立像素 //在某一方向上，x方向或者 y方向。在Javascript 中，可以通過window/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js”/script2).flexible 實際上作用就是能過JS來動態改寫 meta 標籤，代碼類似這樣：var metaEl = doc.createElement(‘meta’); var scale = isRetina ? 0.5:1; metaEl.setAttribute(‘name’, ‘viewport’); metaEl.setAttribute(‘content’, ‘initial-scale=’ + scale + ‘, maximum-scale=’ + scale + ‘, minimum-scale=’ + scale + ‘, user-scalable=no’); if (docEl.firstElementChild) { document.documentElement.firstElementChild.appendChild(metaEl); } else { var wrap = doc.createElement(‘div’); wrap.appendChild(metaEl); documen.write(wrap.innerHTML); } 事實上他做了這幾樣事情：添加meta標籤，並動態改寫 meta 標籤給 html 元素添加 data-dpr 屬性，並且動態改寫 data-dpr 的值給 html 元素添加 font-size 屬性，並且動態改寫 font-size 的值3. 布局（以scss為例）1）基本布局：rem將視覺稿中的px單位轉換成rem單位 ：html元素尺寸 = 視覺稿px值 / rem基準值例如：視覺稿寬度750px，則html中的縮放倍率就是750 / 10 = 75，然後以這個為基準值，如果視覺稿中某塊小內容寬度是150px，則html中這塊內容寬度就是 150 / 75 = 2rem2）字號:px字號用px單位，並根據情況用[data-dpr]屬性來區分不同dpr下的文本字號大小。為了能更好的利於開發，在實際開發中，我們可以定製一個 font-dpr()Sass混合宏：@mixin font-dpr($font-size){ font-size: $font-size; [data-dpr=”2″] { font-size: $font-size * 2; } [data-dpr=”3″] { font-size: $font-size * 3; } } 設置混合宏之後，在開發中可以直接這樣使用：@include font-dpr(24px);以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

移動端H5頁面適配問題研究

剛開始做移動端web開發的同學應該都碰到過頁面適配問題，為什麼我在開發手機上調試好的頁面在其他手機會有這樣或那樣的樣式問題？ viewport 我也設置了，為什麼還是顯示不正常？難道我要為每種手機屏幕寫媒體查詢，有沒有簡單的方式，可以不用關注手機屏幕的差異性呢？

百度中搜索 移動端H5頁面適配 關鍵字，大概可以得到180多萬的搜索結果，由此可見這個問題也得到很多人的關注。本文的目的主要是分析解決移動端H5頁面適配問題過程中牽扯到的知識點，然後梳理分析目前常見的適配解決方案。

由於本文內容較長，下面先給出文章的提綱：

1.1理解移動端單位

　 1.2理解viewport

2.1圖片高清適配

　 2.2字體大小適配

　 2.3布局寬度適配

—這裡是分隔符，正文開始—

不知道正在看文章的你對上面列出來的這些單位是不是很熟悉，如果是的話，就可以跳過了。

理解這些單位的用法以及區別，對理解移動端頁面適配有很大的幫助。為了讓你對上面的單位有個大體的認知，這裡把上面的單位分成了三類：

下面分別對每個單位展開分析：

*** dpi / ppi ***

** dpi ** , dot per inch ，每英寸的點數；打印或印刷領域使用的單位，代表打印機每英寸可以打印出的點數 。

ppi , pixel per inch ，每英寸的像素數，像素密度；表示圖像或者顯示器單位面積上像素數量。

dpi 和 ppi 都是描述分辨率的單位，但是兩者是有區別的，但是在描述手機分辨率時，可以認為兩者意義相同，以前android設備偏向於使用 dpi ，ios設備偏向於使用 ppi ，目前android和ios統一使用 ppi 描述手機屏幕的像素顯示密度。

ppi的計算方法：

*** ldpi、mdpi、hdpi、xhdpi、xxhdpi ***

android對移動設備不同屏幕分辨率的分類。

*** pt，pc，sp ***

** pt ** ，磅（point的音譯），印刷中使用的表示字型的大小單位，1inch = 72pt （印刷中這個關係成立，ios中不成立），ios開發中使用的邏輯單位，是和設備無關的單位。

** pc ** 印刷中使用的單位，1pc = 12pt，不需要關注。

** sp **， scale independent pixel ，android設備中用來顯示字體大小的，和設備無關的尺寸，當設置字體大小單位為sp時，android系統字體大小會影響設置的字體渲染時的大小。

*** dip / dp ***

** dp/dip**， device independent pixel，表示設備獨立像素，和設備無關的尺寸，相同的dp/dip值，不同設備展示的效果是一樣的。

android使用的單位，之前偏向使用dip，目前建議使用dp。

android設備中，規定160ppi的屏幕，1dp = 1px；320ppi的屏幕，1dp = 2px，所以android設備中dp的計算方法：dp = px * (ppi / 160)，這裡的px是指設備的物理像素點。

和ios開發中用的pt單位類似。

*** px ***

** px ** ，像素，有兩種像素概念，一種是網頁設計中使用的css像素，一種是原生移動系統使用的物理像素。

作為css像素時，表示的也是一種設備無關單位，與android中使用的dp類似，默認情況下與系統分辨率下的像素大小相同，標清設備中，一個css像素和一個設備物理像素大小相同；在高清設備中，一個css像素可以大於或者等於多個設備物理像素，具體一個css像素，需要多少個物理像素來展示，瀏覽器會根據dpr計算。

原生移動系統中使用px單位時，表示的就是屏幕的物理像素點，每種屏幕的物理像素點大小可能不一樣。

*** dpr ***

** dpr ** ，device pixel ratio， 橫向或者縱向設備物理像素數量與設備獨立像素數量的比值，瀏覽器中可以通過window.devicePixelRatio獲取(存在兼容性問題)。

對於原生app，ios和android系統會自動根據dpr計算出渲染時需要的px值，最終不同屏幕上展示出來的大小很接近；而移動端頁面渲染時想要做到這一點，就必須首先得到設備的dpr，然後再根據dpr計算渲染需要的px值。

ios設備中iphone3的dpr為1；iphone4,5,6,7的dpr為2；iphone6+,7+的dpr為3。iphone6+和iphone7+實際計算出來的dpr應該時2.6左右，但是官方還是建議dpr為3，這是因為ios系統利用了一種“縮減像素採樣”算法，自動縮減到2.6。

android設備中dpr值有多種，可知的有0.75，1，1.5，1.75，2，2.5，2.75，3，4等。

*** em，rem ***

** em ** 相對單位，CSS2引入的單位，作為字體大小使用時和百分比單位類似，都是相對於最近的父元素設置的字體大小，在body上設置字體大小為100%和設置字體大小為1em是一樣的效果，默認情況下瀏覽器的字體大小為16px，這樣只要瀏覽器默認得字體大小不變，1em = 16px。

** rem ** 相對單位，root em，CSS3新增的單位，作用和em類似，唯一的區別就是em是相對父元素的，rem是相對html根節點的，即所有使用rem單位的子元素的字體大小都是相對根節點的，所以使用rem可以避免使用em帶來的子元素字體大小逐層複合的連鎖反應。

更多關於em，rem的知識參見這篇文章 理解web開發中的em單位和rem單位 。

*** 分辨率 ***

平時說的手機屏幕分辨率，也稱為物理分辨率或者原生分辨率，通常包括縱向分辨率和橫向分辨率，例如iphone6的物理分辨率是1334 x 750，其中縱向分辨率是1334px，橫向分辨率是750px，表示縱向方向可以顯示1334個物理像素點，橫向上可以顯示750個物理像素點，這裡描述分辨率使用的px單位，和css中使用的px單位意義不一樣，這裡代指物理設備的像素點。

還有一種分辨率叫做系統分辨率，例如iphone6的系統分辨率是667 x 375，其中高度是667pt，寬度是375pt，這裡描述分辨率使用了pt單位，是一種設備無關單位。

屏幕尺寸相同的設備，物理分辨率越高，ppi也就越大，絕對單位面積上展示的物理像素數量越多，展示圖片也就越細膩。

蘋果把ppi 300的屏幕稱為視網膜屏,Retina屏。

傳統桌面web頁面布局通常是定寬布局，但是定寬布局的方式對移動端卻不適用，原因手機屏幕尺寸大小各異，定寬布局可能在某些手機上出現橫向滾動條，導致閱讀效果比較差。

為了讓手機有更好的網頁瀏覽體驗，蘋果引入了viewport，為頁面提供了一個虛擬的布局窗口，在這個虛擬的布局窗口中渲染頁面，然後系統會把渲染好的頁面自動縮放到手機屏幕大小。

雖然viewport還沒有成為正式的規範，但是現在絕大部分瀏覽器都支持viewport。

在桌面瀏覽器中，viewport嚴格等於瀏覽器窗口大小，頁面渲染時，頁面寬度不會超過瀏覽器的寬度。

移動端屏幕太窄，為了提供更好的頁面體驗，移動端提供了兩種viewport： 可視viewport ， 布局viewport 。

可視viewport 就是當前屏幕正在展示的區域，也就是移動設備屏幕的寬度，寬高通過window.innerWidth和window.innerHeight獲取（存在兼容性問題）。

布局viewport ，頁面布局實際用到的viewport，通常比可視viewport要寬，寬高通過document.documentElement.clientWidth和document.documentElement.clientHeight獲取。

移動端還有一種viewport概念，可以理解為 理想viewport ，作用就是在理想viewport下，不同移動設備，展示的字體大小接近，並且不需要用戶縮放就可以展示全部的頁面內容。

理想viewport的寬度默認等於可視viewport的寬度，但是對同一台設備來說，這個理想viewport的寬度是可以改變的，而可視viewport的寬度是不可變的。

如何使用理想viewport來布局頁面呢？只需要設置viewport的width等於device-width。

viewport的屬性，推薦使用以及支持度較廣泛的屬性只有6個： width ， height ， initial-scale ， maximum-scale ， minimum-scale ， user-scalable 。

width 設置viewport布局寬度，內核是webkit的瀏覽器默認值是980px，取值範圍在200-10000px，也可以取值為設備寬度device-width（等於橫向設備無關像素數量）。

height 設置viewport布局高度，默認值依賴設備長寬比以及寬度值，取值範圍在223-10000px，也可以取值為設備高度device-height。

initial-scale 設置初始縮放比例，頁面第一次加載時的縮放比例。默認比例依賴於顯示密度。在密度低於200 dpi的顯示設備上，比例為1.0。在密度介於200及300 dpi之間的顯示設備上，比例為1.5。對於具有300 dpi以上密度的顯示設備，比例為密度/150 dpi向下取整的結果。取值範圍由 maximum-scale 屬性以及 minimum-scale 屬性決定。如果設置 initial-scale 值為1， width 默認是device-width， height 默認是device-height

initial-scale 設置的縮放大小會改變理想viewport的大小，不會改變可視viewport的大小，也不會改變布局viewport的大小，這是某些適配方案依賴的基本原理，也是解決 1px問題 的關鍵。後面分析適配方案時，動態viewport適配方案就依賴這個知識點。

maximum-scale 允許用戶縮放到的最大比例，默認值是0.5，範圍從0到10.0。

minimum-scale 允許用戶縮放到的最小比例，默認值是5.0，範圍從0到10.0。

user-scalable 用戶是否可以手動縮放，值可以是：yes/true允許用戶縮放；no/false不允許用戶縮放。

圖片適配的目的是為了在頁面中可以高清還原設計圖中用到的圖片。

頁面中用到的圖片是否清晰和展示頁面的硬件設備的dpr以及圖片分辨率這兩個因素有關，下面會通過三個例子來說明這個問題。

***示例一 ***

例如dpr=2的設備，1個設備無關像素(android中的1dp，ios中的1pt)需要4個設備物理像素點填充。對於尺寸為100 x 120 (px)的圖片，如果用 img 來展示，圖片顯示時會產生模糊現象。

原因：渲染圖片時，寬度是100px，所以橫向會佔用100個設備無關像素，高度是120px,所以縱向會佔用120個設備無關像素，每個設備無關像素又需要2×2個物理像素點來填充，而圖片在每個設備無關像素(px)單位上提供的像素點只有1×1個，這時，系統通過一定的算法在這1個像素點上就近取色，取到4個顏色(這4種顏色接近但是有一定區別)之後，當成4個像素點，然後填充到1個設備無關像素點上，這樣就導致圖片顯示時模糊，dpr越大，這種方式顯示的圖片越模糊。

示例二

還是dpr=2的設備，但是準備了一個尺寸為200 x 240 (px)的圖片，還是用 img 來展示，這時顯示的圖片就比較清晰了。

原因：這時圖片本身可以在一個設備無關像素單位上提供2×2個物理像素點，設備展示圖片時直接拿圖片提供的像素點來填充就可以了，不用對像素點進行處理，所以可以比較清晰的顯示圖片。

示例三

還是dpr=2的設備，這次準備一個尺寸400 x 480 (px)的圖片，還是用 img 來展示時，這種情況展示的圖片缺少銳利度，也影響了圖片的清晰度，但是很難看出來。

原因：圖片本身在一個設備無關像素點單位上提供了4×4個物理像素點，而設備本身只需要2×2個物理像素點，所以會通過縮減採樣算法，在圖片提供的4×4個物理像素點中，選取顏色接近的2×2個物理像素點填充到設備無關像素點上，所以也會產生一定的色差，這種情況下圖片尺寸越大，這種色差也就越明顯，但是人眼很難區分這種色差。

下面是我在oppo的一款手機上的測試結果，結合這張效果圖就可以很好的理解上面的三個示例了：

圖片適配最佳實踐

要想高清顯示圖片，如果條件允許(有單獨的圖片服務器)最直接的解決辦法，肯定是根據設備的dpr，為不同dpr的設備加載不同倍率大小圖片顯示；沒這種條件的或者對用戶體驗沒有很高要求的，只能選一種折中的方案了，一般情況下只需要提供布局尺寸2倍大小的切圖就可以了，也就是只高清適配dpr=2的設備，但是dpr為3或者4的設備展示效果也能接受，不容易看出來模糊現象。目前主流機型的dpr也就在2和3之間。

字體適配目標主要還是看設計要求，主要有兩種：

1.不同屏幕下，字體顯示大小都一樣，即需要等寬顯示字體；

2.不同屏幕下，一行能顯示的字數固定，即需要按比例縮放字體大小；

開始分析之前，先看下這兩種字體適配的示例：

第1種字體適配方案的示例

第2種字體適配方案的示例

下面就來具體分析下兩種字體適配方案的原理以及優劣。

** 第1種字體適配方案原理 **

在開始分析這種方式的原理之前，先通過一張圖理解下px和dp以及絕對長度之間關係。

由上圖可知字體大小隻與css單位px有關，而每個設備上px的絕對寬度又和設備的絕對寬度以及絕對寬度上劃分出的設備無關像素點dp有關；只要設備的橫向dp數量與絕對寬度的比值(dp/cm)相同，就可以保證px在不同設備上展示的絕對寬度是一樣的；如果dp/cm的比值過大，那麼px的絕對長度就會變小，看起來就會顯小；如果dp/cm的比值過小，那麼px的絕對長度就會變大，看起來就會顯大；一般來說手機屏幕分辨率越高，相同px值的字體看起來就會越小。

iphone5和6的dp/cm比值十分接近，所以12px大小的字體在這兩種手機上顯示的大小基本一樣，看不出來區別，但是iphone6+的dp/cm比值要比iphone5,6的略大，這就導致12px大小的字體在6+上顯示的比5，6上顯示的略小，上面的淘寶對比圖仔細分辨可以看出來。

android的手機屏幕dp/cm比值在各個設備之間也有差異性，並且比較有多樣性。所以同樣12px大小的字體，各個設備顯示時也是有差別的。

這種顯示差別在iphone系列手機中可以忽略不計，但是android碎片化比較嚴重，完美兼容各種機型沒有必要，主流機型中這種顯示差別也可以忽略不計，所以採用這種方式進行字體適配只需要px值設置成一樣的就可以了。

** 第1種字體適配方案優缺點**

優點：1.不同設備中字體大小顯示一致，比較統一；2.大屏手機可以顯示更多的文字；

缺點：1.由於單個字體寬度是定死的，所以在有些機型下可能會影響頁面布局；

** 第2種字體適配方案原理 **

在設計稿中，計算出字體大小相對於基準字體大小（基準字體大小可以選擇設計稿寬度，一般為了計算方便，會把設計稿寬度/10得到的值作為基準字體大小）的比值，然後在不同布局寬度下，先得到基準字體大小，再根據上面計算出來的比值，就可以計算出來不同布局寬度下的字體大小，也就是不同布局寬度下等比例縮放字體。

利用rem的特性，在頁面的html標籤上設置一個基準字體大小，就可以實現這種方式。

例如，寬是750px的設計圖中，字體大小是32px，計算出基準字體大小為75px，比值為 32 * 10 / 75 = 0.426667。

如果布局寬度是414px，此時基準字體大小變成 414 / 10 = 41.4px，然後設置html style=”font-size:41.4px”，字體大小是0.426667rem，計算出來的字體大小為41.4×0.42667=17.66px。

如果布局寬度變成360px，此時基準字體大小變成36px，然後設置html style=”font-size:36px”，字體大小仍然用0.426667rem表示，計算出來的字體大小為36×0.42667=15.36px。

750/32 約等於 414/17.66 約等於 360/15.36，這樣就做到了等比縮放字體了。

** 第2種字體適配方案優缺點**

缺點：1.小尺寸設備屏幕上字體顯示小，大尺寸設備屏幕字體顯示大，導致字體顯示不一致；2.不能發揮大屏手機的優勢（顯示更多的字）；3.字體大小會出現奇數或者小數點大小的值，某些字體不支持這些值，渲染時增加計算量；

優點：1.適配簡單，不同設備不會影響頁面布局，可以和設計稿布局保持一致；

布局中對寬度的適配，也是採用rem來實現，和上面第2種字體大小適配方式中的原理類似，也是計算出一個比例值，然後不同布局寬度中等比縮放，這裡偷下懶，不在贅述。

目前的解決方案有兩類

第一類就是js動態生成viewport標籤，標籤中的initial-scale值根據設備的dpr計算，不同dpr設備的viewport值不同。

第二類就是js不操作viewport，每個設備都使用理想viewport來布局。

** 動態viewport解決方案分析 **

這裡分析兩個動態viewport解決方案：

1.手機淘寶的flexible方案；

2.hotcss方案；

手機淘寶的flexible方案 ，特點：

1.僅針對iphone生成動態viewport，因為目前iphone的dpr只有1，2，3三種，android的dpr很有多種，不具有一致性；

2.字體大小不用rem做縮放處理，仍然使用px單位，設置不同dpr下對應的字體大小；

3.寬度利用rem等比縮放；

4.允許強制定義dpr;

使用時頁面頭部需要引入 flexible.js .

hotcss方案 ，特點：

1.不區分iphone和android，dpr只取三種1,2,3，android的dpr做近似處理；

2.寬度以及字體利用rem等比縮放；

3.允許強制定義dpr;

使用時頁面頭部需要引入 hotcss.js

動態viewport方案之所以會稱為動態viewport是因為，這個適配過程會根據系統dpr值設置initial-scale屬性的大小，大小等於1/dpr。

** 靜態viewport解決方案分析 **

利用rem特性，先根據標註圖算出各元素相對於設計稿寬度的比值，這個比值就作為rem值，然後頁面布局時就用算出的rem值表示，並且在html根元素設置當前布局頁面寬度作為基準。更rem值計算具體的解釋可以參考這篇文章 使用Flexible實現手淘H5頁面的終端適配 。通過這種方式設置標籤元素的寬高，位置以及字體大小，這樣利用rem特性就可以在不同手機屏幕上實現等比縮放。

參考資料

html5, js實現安卓手機在微信瀏覽器中下載APP問題，如圖

一款JS+html5轉盤抽獎代碼網頁特效，該特效代碼基於html5canvas技術實現，點擊開始旋轉按鈕，轉盤就會快速旋轉，停止旋轉後，所在區域就是中獎項目。獎項可以自定義。請用支持HTML5+CSS3主流瀏覽器預覽效果。（兼容測試：FireFox、Chrome、Safari、Opera等支持HTML5/CSS3瀏覽器）使用方法：1、調用CSS樣式：2、添加HTML代碼：將之間的html和js代碼；放在之間。