① 求一段H5移動端禁止復制，長按彈出菜單html代碼。
οncοntextmenu='return false' //禁止右鍵
οndragstart='return false' //禁止拖動
onselectstart ='return false' //禁止選中
οnselect='document.selection.empty()' //禁止選中
οncοpy='document.selection.empty()' //禁止復制
onbefore='return false' // 禁止復制
οnmοuseup='document.selection.empty()'
moz-user-select: -moz-none;
-moz-user-select: none;
-o-user-select:none;
-khtml-user-select:none;
-webkit-user-select:none;
-ms-user-select:none;
user-select:none;
}
② H5+CSS3移動端適配技術
近期因工作需求，做了一個Vue APP，過程中遇到了曾今經常聽說，但從未真正接觸過的移動端適配問題，中間遇到了很多挫折，經過了5天吧，這個小app經過來回重寫樣式好幾遍，終於找到了門道，應該算是正路吧，我身邊也沒有真正做h5 app的夥伴，靠著自己網路、揣摩，外加朋友的幫助，學會了適配的方案。
解釋
vw：屏幕可視寬度百分比
vh：屏幕可視高度百分比
vmin：屏幕可視寬度和高度中較小的那個，用這個單位，可以讓字體在移動設備無論橫屏還是豎屏都保持大小不變
vmax：屏幕可視寬度和高度中較大的那個，用處同上vmin
%：相對於父級元素的百分比尺寸
由於設備的高度會在不同的情況下受到影響，所以我們主要使用vw去控制各個元素的尺寸，因為設備的可視寬度正常情況下是不會有什麼東東佔用的，我沒遇到過，所以設備的寬度就是可視寬度，那麼寬度不變，我們使用vw去控制元素尺寸的時候，也就不會受到任何影響了，無論在什麼情況下，都能保證元素的位置和尺寸不變了
而我們在適當的情況下需要使用%，因為vw、vh等都是設備的整個屏幕的可視寬高百分比，而有時候我們要的百分比是相對父級元素的，所以不要隨便亂用，要想好再用
下面展示下把web app打包成apk全屏應用和在瀏覽器中瀏覽的效果
px 轉 rem，還有寫各種屏幕的不同樣式的方案是過去的方案，當前主流使用CSS3的新特性單位，才最佳
③ h5移動端 怎樣兼容火狐瀏覽器 歐朋瀏覽器 chrome瀏覽器
1、DOCTYPE 影響 CSS 處理
2、FF: 設置 padding 後， div 會增加 height 和 width， 但 IE 不會， 故需要用 !important 多設一個 height 和 width
3、FF: 支持 !important， IE 則忽略， 可用 !important 為 FF 特別設置樣式
4、div 的垂直居中問題: vertical-align:middle; 將行距增加到和整個DIV一樣高 line-height:200px; 然後插入文字，就垂直居中了。缺點是要控制內容不要換行
5、在mozilla firefox和IE中的BOX模型解釋不一致導致相差2px解決方法：
div{margin:30px!important;margin:28px;}
多數移動端瀏覽器都是使用的webkit內核（包括ios上的firefox），網頁的表現效果基本無差別，需要考慮的是解析度兼容等問題。
④ html5移動端調用手機攝像頭掃描二維碼並獲取二維碼信息代碼怎麼寫
html5移動端調用手機攝像頭掃描二維碼並獲取二維碼信息代碼如下：
[html]view plain
<!DOCTYPEhtml>
<html><head>
<title>HTML5codeReader</title>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
</head>
<styletype="text/css">
html,body{height:100%;width:100%;text-align:center;}
</style>
<scriptsrc="jquery-1.9.1.js"></script>
<script>
//這段代主要是獲取攝像頭的視頻流並顯示在Video簽中
varcanvas=null,context=null,video=null;
window.addEventListener("DOMContentLoaded",function()
{
try{
canvas=document.getElementById("canvas");
context=canvas.getContext("2d");
video=document.getElementById("video");
varvideoObj={"video":true,audio:false},
flag=true,
MediaErr=function(error)
{
flag=false;
if(error.PERMISSION_DENIED)
{
alert('用戶拒絕了瀏覽器請求媒體的許可權','提示');
}elseif(error.NOT_SUPPORTED_ERROR){
alert('對不起，您的瀏覽器不支持拍照功能，請使用其他瀏覽器','提示');
}elseif(error.MANDATORY_UNSATISFIED_ERROR){
alert('指定的媒體類型未接收到媒體流','提示');
}else{
alert('系統未能獲取到攝像頭，請確保攝像頭已正確安裝。或嘗試刷新頁面，重試','提示');
}
};
//獲取媒體的兼容代碼，目前只支持（Firefox,Chrome,Opera）
if(navigator.getUserMedia)
{
//qq瀏覽器不支持
if(navigator.userAgent.indexOf('MQQBrowser')>-1){
alert('對不起，您的瀏覽器不支持拍照功能，請使用其他瀏覽器','提示');
returnfalse;
}
navigator.getUserMedia(videoObj,function(stream){
video.src=stream;
video.play();
},MediaErr);
}
elseif(navigator.webkitGetUserMedia)
{
navigator.webkitGetUserMedia(videoObj,function(stream)
{
video.src=window.webkitURL.createObjectURL(stream);
video.play();
},MediaErr);
}
elseif(navigator.mozGetUserMedia)
{
navigator.mozGetUserMedia(videoObj,function(stream){
video.src=window.URL.createObjectURL(stream);
video.play();
},MediaErr);
}
elseif(navigator.msGetUserMedia)
{
navigator.msGetUserMedia(videoObj,function(stream){
$(document).scrollTop($(window).height());
video.src=window.URL.createObjectURL(stream);
video.play();
},MediaErr);
}else{
alert('對不起，您的瀏覽器不支持拍照功能，請使用其他瀏覽器');
returnfalse;
}
if(flag){
alert('為了獲得更准確的測試結果，請盡量將二維碼置於框中，然後進行拍攝、掃描。請確保瀏覽器有許可權使用攝像功能');
}
//這個是拍照按鈕的事件，
$("#snap").click(function(){startPat();}).show();
}catch(e){
printHtml("瀏覽器不支持HTML5CANVAS");
}
},false);
//列印內容到頁面
functionprintHtml(content){
$(window.document.body).append(content+"<br/>");
}
//開始拍照
functionstartPat(){
setTimeout(function(){//防止調用過快
if(context)
{
context.drawImage(video,0,0,320,320);
CatchCode();
}
},200);
}
//抓屏獲取圖像流，並上傳到伺服器
functionCatchCode(){
if(canvas!=null)
{
//以下開始編數據
varimgData=canvas.toDataURL();
//將圖像轉換為base64數據
varbase64Data=imgData;//.substr(22);//在前端截取22位之後的字元串作為圖像數據
//開始非同步上
$.post("saveimg.php",{"img":base64Data},function(result)
{
printHtml("解析結果："+result.data);
if(result.status=="success"&&result.data!="")
{
printHtml("解析結果成功！");
}else{
startPat();//如果沒有解析出來則重新抓拍解析
}
},"json");
}
}
</script>
<body>
<divid="support"></div>
<divid="contentHolder">
<videoid="video"width="320"height="320"autoplay>
</video>
<canvasstyle="display:none;background-color:#F00;"id="canvas"width="320"height="320">
</canvas><br/>
<buttonid="snap"style="display:none;height:50px;width:120px;">開始掃描</button>
</div>
</body></html>
⑤ 手機打開PC網頁在不修改H5代碼的前提下如何適配到移動端
想要一套代碼就完全適配pc和手機是不太可能的，不過對於一般的需求還是可以滿足的
只需要在html的開頭加上幾行代碼(可以網路html如何自適應編程)，另外對於width、font-size等應盡量使用%,em等
⑥ H5兼容性問題
記錄H5頁面各種兼容性問題匯總
1、h5頁面點擊事件ios沒反應 移動端兼容性問題
解決辦法：給觸發點擊事件動態添加的dom增加樣式, cursor:pointer 或者增加一個 touch 事件
2、ios input button背景色不起作用的
解決辦法：
3、關於ios端上傳圖片後旋轉90°可以看我另外一篇 有詳細介紹（iphone默認橫屏拍照才是正確的方向,豎屏拍照會攜帶逆時針旋轉90°的信息）
4、在flex容器中，當空間不夠的時候，設置了固定寬高的圖片被壓縮，flex-shrink不為0的元素會被壓縮，所以解決的方法就是給圖片設置： flex-shrink: 0; 防止被壓縮
5、H5點擊事件時會有閃頻效果
解決辦法：html 或者body
6、正則表達式匹配iframe標簽
7、隱藏滾動條
⑦ 如何用html5構建移動端的webapp
H5e教育html5開發為您解答：
移動web在當今的發展速度是一日千里，作為移動領域的門外漢，在這段時間的接觸後，發現前端開發這一塊做一個小小的總結。
1.四大瀏覽器內核
1.Trident (IE瀏覽器) :因為在早期IE佔有大量的市場份額，所以以前有很多網頁是根據這個Trident的標准來編寫的，但是實際上這個內核對真正的網頁標准支持不是很好，同時存在許多安全Bug。
2.Gecko:( FireFox )優點就是功能強大、豐富，可以支持很多復雜網頁效果和瀏覽器擴展介面，缺點是消耗很多的資源，比如內存。
3.Webkit: ( Chrome/ Safari / UC )優點就是Webkit擁有清晰的源碼結構、極快的渲染速度，缺點是對網頁代碼的兼容性較低，會使一些編寫不標準的網頁無法正確顯示。
4.Presto: ( 歐朋 ) Presto內核被稱為公認的瀏覽網頁速度最快的內核，同時也是處理JS腳本最兼容的內核，能在Windows、Mac及Linux操作系統下完美運行。
移動端開發主要對象是手持設備，其中絕大部分是IOS和Android系統，基於Webkit內核，可使用Chrome瀏覽器調試即可。
2.手機瀏覽器
瀏覽器已經逐漸從傳統桌面轉向手機端，競爭也越來越激烈。目前國內市場主流的手機瀏覽器：UC、網路、歐朋、QQ、海豚、safari、Chrome，這些瀏覽器都是基於webkit內核的，兼容性方面不存在問題，同時對html5和css3的支持很好，所以，大膽地應用html5和css3技術吧。
在開始編寫webapp時，前端工程師使用HTML5，而放棄HTML4，因為HTML5可以實現一些HTML4中無法實現的豐富的WEB應用程序 的體驗，可以減少開發者很多的工作量，當然了你決定使用HTML5前，一定要對此非常熟悉，要知道HTML5的新標簽的作用。比如定義一塊內容或文章區域 可使用section標簽，定義導航條或選項卡可以直接使用nav標簽等等。
3.終端解析度
手機解析度比PC解析度要龐雜得多，各種解析度有木有？大小差距那麼大有木有？這在一定程度上給頁面製作帶來了不小的麻煩。所以針對這樣的因素，必須有充分的考慮。考慮到瀏覽器自適應，需要設計和製作完成各種不同的方法。
1) 市場上主流手機生產商的產品解析度。經過調研發現，目前主流的手機解析度為：480*800像素、320*480像素，而1280*720像素（720P）會是接下來的趨勢。這些都是很粗略的統計，要有精確的數據需要花費不少的精力，那是數據分析人員的工作。
2) 項目目標群所持設備的解析度。項目目標群即用戶，用戶擁有什麼樣的手機解析度，從一定程度上來說比第一點來得更加重要，它決定著項目開發的方向。
4.響應式web開發
在編寫CSS時，我不建議前端工程師把容器（不管是外層容器還是內層）的寬度定死。為達到適配各種手持設備，我建議前端工程師使用自適應布局模式（支付 寶 採用了自適應布局模式），因為這樣做可以讓你的頁面在ipad、itouch、ipod、iphone、android、web safarik、chrome都能夠正常的顯示，你無需再次考慮設備的解析度。
響應式web開發不是一項開創性的技術變革，簡單地說，響應式web設計採用了媒體查詢、流式布局、液態圖片三項技術，把它們組合在一起來製作頁面，使得頁面不只在傳統桌面，在平板電腦和手機上，各種不同的解析度都能夠完美顯示。而要做到這點，我覺得不難，請繼續往下：
1) 准備工作：
a) 插件安裝：window resize。您可以通過下載安裝谷歌瀏覽器插件，安裝成功後，當您調整瀏覽器窗口時，在瀏覽器右下角會有灰度提示當前窗口和類似於手機視圖的大小提示。
b) 編輯器安裝：Hbulder或Webstorm
c) 弄清視圖和屏幕的區別。視圖是瀏覽器的內容顯示區域，屏幕是設備的物理顯示區域。比如視圖寬度我們一般用width表示，而屏幕寬度是用device-width來表示。相信做過手機頁面的童鞋都經常見過這段代碼：
<meta name="viewport" content="width=device-width,initial-scale=1.0">
其中width=device-width就是說把頁面寬度設置成和屏幕寬度一樣。
d) 響應式設計創意網站收集 。這里有很多響應式Web設計的網站，供您參考和學習。
2) 征途ING：
e) 響應式web設計之媒體查詢：
為了減少http請求，我想在css樣式表裡進行媒體查詢會是個不錯的選擇，而不是在頁面head部分使用link進行載入。樣式表裡的媒體查詢格式為：
@media screen and (max-width:960px){}
大括弧內部書寫樣式。該語句相當於判斷語句，有兩個條件，一個是視口寬度最大不超過960px，screen代表顯示屏，這兩個條件都具備了，就調用大括弧內的樣式。
f) 響應式web設計之流式布局：
流式布局以百分比進行布局。最重要是時刻關注元素的父級層，所有的元素都是以父級層為基準。流式布局的應用是為了和媒體查詢完美地結合，形成平滑的布局變 化跳轉效果。一般而言，media里的樣式多以width、padding、margin、font-size、line-height這些為主。
g) 響應式web設計之液態圖片：
要實現液態圖片，只需加入如下代碼：img{max-width:100%;}
web移動頭部書寫
1、首先我們來看看webkit內核中的一些私有的meta標簽，這些meta標簽在開發webapp時起到非常重要的作用
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
這個meta標簽表示：強制讓文檔的寬度與設備的寬度保持1:1，並且文檔最大的寬度比例是1.0，且不允許用戶點擊屏幕放大瀏覽；
<meta content="yes」 name=" apple-mobile-web-app-capable" />
meta標簽是iphone設備中的safari私有meta標簽，它表示：允許全屏模式瀏覽；
<meta content="black" name=" apple-mobile-web-app-status-bar-style" />
meta標簽也是iphone的私有標簽，它指定的iphone中safari頂端的狀態條的樣式；
<meta content="telephone=no" name="format-detection" />
meta標簽表示：告訴設備忽略將頁面中的數字識別為電話號碼
⑧ vue 移動端H5適配方案
這次分享一下我自己常用的一套移動端H5適配方案，幾乎適配所有移動端設備。