① 求一段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适配方案，几乎适配所有移动端设备。