相信大家在做h5頁面開發的時候，也會遇到一些問題。筆者將h5開發過程中常見的一些問題和解決辦法列舉出來，有需要的朋友可以參考一下。
1. 安卓瀏覽器看背景，有些裝置會模糊。
同等比例的在pc端頁面和移動手機端頁面的解析度差很多，原因和devicepixelratio有關。手機解析度比pc端的解析度小，按照解析度來顯示網頁會讓字型變得很小。所以蘋果當初就把iphone 4的960*640解析度，在網頁裡只顯示了480*320，devicepixelratio＝2。現在android比較亂，有1.5的，有2的也有3的。
想讓在手機裡顯示更為清晰，必須使用2x的背景圖來代替img標籤（一般情況都是用2倍）。例如乙個div的寬高是100100，背景圖必須得200200，然後background-size:contain;，這樣顯示出來的就比較清晰了。
**如下：
background:url(../images/icon/all.png) no-repeat center center;
-webkit-background-size:50px 50px;
background-size: 50px 50px;display:inline-block; width:100%; height:50px;
或者指定 background-size:contain;都可以
2. 載入
若遇到載入很慢的問題，對這種情況，手機開發一般用canvas方法載入。
下面舉例說明乙個canvas的例子：
js動態載入和li 總共舉例17張！
var total=17;
var zwin=$(window);
var render=function()
tmpl +='';
var imageobj = new image();
imageobj.index = i;
imageobj.onload = function()
以上就是筆者整理的一些常見的h5頁面開發中會遇到的問題。當然，如果覺得自己動手開發麻煩，預算又充足的話，也可以找外部承包商來完成開發。筆者體驗過這家服務商開發的h5頁面，效果還可以哦。
vuejs開發H5頁面總結
vuejs開發h5頁面總結 關於布局方案 當拿到設計師給的ui設計圖，前端的首要任務就是布局和樣式，相信這對於大部分前端工程師來說已經不是什麼難題了。移動端的布局相對pc較為簡單，關鍵在於對不同裝置的適配。之前介紹了一篇關於移動端rem布局方案，這大致是網易h5的適配方案。不過實踐中發現 開源的可伸...
H5及H5頁面是什麼意思？如何製作H5頁面？
h5是html5的簡稱。html5是html最新的修訂版本，是一種超文字標記語言。h5有兩大特點 首先，強化了 web 網頁的表現效能。其次，追加了本地資料庫等 web 應用的功能。第二步 選擇 高階模式 點 建立應用。第三步 進入製作頁面。九個控制項，通過點選新增到製作介面，控制項的選擇使用按照你...
h5頁面的寫法 移動端h5頁面寫法
1.頁面寬度320，所有元素尺寸設一半 缺點 不自能適應全屏 2.頁面寬度640，元素尺寸正常 暫未發現問題 3.頁面寬度640，js控制自適應全屏 adaptuilayout.adapt initviewportwidth 缺點 qq空間分享後點開頁面套在qq預設瀏覽器裡有相容性問題 4.rem寫...