移动端代码实例（移动终端编程）

今天给各位分享移动端代码实例的知识，其中也会对移动终端编程进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、移动端的一个js效果：手滑动向上向下滚动li标签
• 2、wordpress中移动端判定的代码该怎么用？
• 3、移动端代码规范（1）
• 4、HTML5如何利用rem实现自适应布局
• 5、html5移动端调用手机摄像头扫描二维码并获取二维码信息代码怎么写？

移动端的一个js效果：手滑动向上向下滚动li标签

试试以下代码：

!DOCTYPE html

html

head

mata charset="utf-8"/

link rel="stylesheet" href=""

script src=""/script

script src=""/script

script

$(document).on("pageinit","#pageone",function(){

  $(document).on("scrollstop",function(){

    alert("停止滚动！");

  });                       

});

/script

/head

body

div data-role="page" id="pageone"

  div data-role="header"

    h1scrollstop 事件/h1

  /div

  div data-role="content"

    pb提示：/b如果未出现滚动条，请尝试调整窗口尺寸。/p

   ul data-inset="true"

        li data-role="list-divider"信息列表/li

        li data-role="fieldcontain"大学1/li

        li data-role="fieldcontain"大学大学2/li

        li data-role="fieldcontain"大学大学3/li

        li data-role="fieldcontain"大学大学4/li

        li data-role="fieldcontain"信息大学5/li

        li data-role="fieldcontain"大学6/li

        li data-role="fieldcontain"大学信息7/li

        li data-role="fieldcontain"信息大学8/li

        li data-role="fieldcontain"信息大学大学9/li

        li data-role="fieldcontain"信息大学10/li

        li data-role="fieldcontain"信息大学11/li

        li data-role="fieldcontain"信息大学12/li

        li data-role="fieldcontain"信息大学11/li

        li data-role="fieldcontain"信息大学12/li

        li data-role="fieldcontain"信息大学11/li

        li data-role="fieldcontain"信息大学12/li

        li data-role="fieldcontain"信息大学11/li

        li data-role="fieldcontain"信息大学12/li

        li data-role="fieldcontain"信息大学11/li

        li data-role="fieldcontain"信息大学12/li

        li data-role="fieldcontain"信息大学11/li

        li data-role="fieldcontain"信息大学12/li

      /ul

  /div

  div data-role="footer"

    h1页脚文本/h1

  /div

/div 

/body

/html

wordpress中移动端判定的代码该怎么用？

先确定你的判断函数是否正确，你可以以断点打印wp_is_mobile()是否存在是什么值

如果值存在，也能显示页面，那说明你展示的前端宽高设置带密码有问题；

如果不存在可能是你没引用或安装对应插件；

移动端代码规范（1）

安全边距：15px,用px就行

整体使用：box-sizing: border-box;设置padding时会往里面撑而不会向外，设置宽度为100%时不会占用padding部分

rem布局:

//csshtml{font-size:20px}//jsfunctionsetFontSize(){document.documentElement.style.fontSize =window.innerWidth /16+'px';}setFontSize();window.addEventListener('resize',function(){    setFontSize();});//尺寸计算：样式的rem = ps测量尺寸/2/20 （一般设计图宽度为640px）

点击300ms延迟

//fastclick.jswindow.addEventListener('load',function(){    FastClick.attach(document.body);},false);//或者使用zepto.js代替jquery

头部

标题//iOS 7.1的Safari为meta标签新增minimal-ui属性，在网页加载时隐藏地址栏与导航栏

移动端轮播图（swiper）

!--banner--//左右按钮和分页器写成自己的样式，也用rem去写$(function(){//swipervarmySwiper =newSwiper('#banner', {direction:'horizontal',autoplay:3000,speed:1000,loop:true,pagination:'.swiper-pagination',            })        })

1px的线

参考weui解决办法

清除输入框内阴影

在 iOS 上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样操作：

input,textarea{border:0;-webkit-appearance: none; }

头部和底部使用固定定位定住，注意要设置内容div的margin，不然顶部和头部会遮挡住内容

常用a链接

//发邮件Email//发短信123456//打电话123456//跳转到下一页的指定位置,本页面的a标签 后边加上#XXX，传入一个锚点,新页面指定位置加上idXXX这里是指定位置

设置文字超出部分省略 父级div设置overflow:hidden

//适用于单行文本p{  display:block;  overflow: hidden;  text-overflow:ellipsis;  white-space: nowrap;}

动画

//尽可能多的利用硬件能力，如使用3D变形来开启GPU加速-webkit-transform: translate3d(0,0,0);-moz-transform: translate3d(0,0,0);-ms-transform: translate3d(0,0,0);transform: translate3d(0,0,0);//一个元素通过translate3d右移500px的动画流畅度会明显优于使用left属性：#ball-1 {transition: -webkit-transform.5s ease;  -webkit-transform: translate3d(0,0,0);}#ball-1.slidein {-webkit-transform: translate3d(500px,0,0);}#ball-2 {transition: left.5s ease;  left:0;}#ball-2.slidein {left:500px;}//3D变形会消耗更多的内存与功耗，应确实有性能问题时才去使用它，兼在权衡//尽可能少的使用box-shadows与gradients//尽可能的让动画元素不在文档流中，以减少重排position: fixed;position: absolute;//消除transition闪屏-webkit-transform-style: preserve-3d;/*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/-webkit-backface-visibility:?hidden;/*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/

图片压缩

HTML5如何利用rem实现自适应布局

分析设计图

假设设计图大小为1080px。这也就意味着，在开发时，需要兼容的最大分辨率为1080px，最小的为320px。

2. 调整视口

代码实例：

!DOCTYPE html

head

    meta charset="UTF-8" /

    title布局之路-移动端开发实例/title

    meta name="viewport" content="width=device-width,user-scalable = no" /

    link rel="stylesheet" type="text/css" href="css/reset.css" /

/head

body

    div class="wrap"/div

/body

/html

代码解析：由于使用不同设备打开网页时，宽度均有所不同，所以不能讲视口设置为固定值，应当为width=device-width,即将视口设置为当前设备的宽度。

3. 确定设计图的最小字体

浏览器（部分）能够显示的最小字体未12px，当移动端页面宽度为320px时，要保证最小字体为12px，那么在1080px的设计图中，最小字体应当为42px。

代码实例：

    style type="text/css"

        html {

            font-size: 42px;

        }

    /style

4. 按照设计图的像素进行开发

按照正常网页开发流程，进行网页开发即可。

5. 使用百分比和rem替换px

代码效果对比：

/*使用固定像素*/

.box {

    float: left;

    width: 658px;

    font-size: 72px;

    text-align: center;

    line-height: 195px;

}

/*使用百分比和rem*/

.box {

    float: left;

    width: 60.93%;

    font-size: 1.71rem;

    text-align: center;

    line-height: 4.64rem;

}

代码解析：

水平方向的值，将具体像素调整为百分比。百分比的计算是根据父级的内容区宽度进行计算的。

例如，父级宽度为1080px， 子级元素为197px，那么子元素转换为百分比为：197/1080*100%=18.24%。需要注意的是百分比根据父级计算，当标签结构级别不同时，计算公式中的“分母”也有所不同，在开发时这个地方很容易出现问题，请务必注意。

垂直方向的值，将具体像素调整为rem，与水平方向相比，垂直方向的计算就比较简单。例如，行高为195px，HTML标签当前的字体大小为42px，将行高转换为rem单位，即195/42= 4. 64rem。

html5移动端调用手机摄像头扫描二维码并获取二维码信息代码怎么写？

html5移动端调用手机摄像头扫描二维码并获取二维码信息代码如下：

[html] view plain copy

!DOCTYPE html

htmlhead

titleHTML5 code Reader/title

meta http-equiv="Content-Type" content="text/html; charset=gb2312"

/head

style type="text/css"

html, body { height: 100%; width: 100%; text-align:center; }

/style

script src="jquery-1.9.1.js"/script

script

//这段代 主要是获取摄像头的视频流并显示在Video 签中

var canvas=null,context=null,video=null;

window.addEventListener("DOMContentLoaded", function ()

{

try{

canvas = document.getElementById("canvas");

context = canvas.getContext("2d");

video = document.getElementById("video");

var videoObj = { "video": true,audio:false},

flag=true,

MediaErr = function (error)

{

flag=false;

if (error.PERMISSION_DENIED)

{

alert('用户拒绝了浏览器请求媒体的权限', '提示');

} else if (error.NOT_SUPPORTED_ERROR) {

alert('对不起，您的浏览器不支持拍照功能，请使用其他浏览器', '提示');

} else if (error.MANDATORY_UNSATISFIED_ERROR) {

alert('指定的媒体类型未接收到媒体流', '提示');

} else {

alert('系统未能获取到摄像头，请确保摄像头已正确安装。或尝试刷新页面，重试', '提示');

}

};

//获取媒体的兼容代码，目前只支持（Firefox,Chrome,Opera）

if (navigator.getUserMedia)

{

//qq浏览器不支持

if (navigator.userAgent.indexOf('MQQBrowser')  -1) {

alert('对不起，您的浏览器不支持拍照功能，请使用其他浏览器', '提示');

return false;

}

navigator.getUserMedia(videoObj, function (stream) {

video.src = stream;

video.play();

}, MediaErr);

}

else if(navigator.webkitGetUserMedia)

{

navigator.webkitGetUserMedia(videoObj, function (stream)

{

video.src = window.webkitURL.createObjectURL(stream);

video.play();

}, MediaErr);

}

else if (navigator.mozGetUserMedia)

{

navigator.mozGetUserMedia(videoObj, function (stream) {

video.src = window.URL.createObjectURL(stream);

video.play();

}, MediaErr);

}

else if (navigator.msGetUserMedia)

{

navigator.msGetUserMedia(videoObj, function (stream) {

$(document).scrollTop($(window).height());

video.src = window.URL.createObjectURL(stream);

video.play();

}, MediaErr);

}else{

alert('对不起，您的浏览器不支持拍照功能，请使用其他浏览器');

return false;

}

if(flag){

alert('为了获得更准确的测试结果，请尽量将二维码置于框中，然后进行拍摄、扫描。 请确保浏览器有权限使用摄像功能');

}

//这个是拍照按钮的事件，

$("#snap").click(function () {startPat();}).show();

}catch(e){

printHtml("浏览器不支持HTML5 CANVAS");

}

}, false);

//打印内容到页面

function printHtml(content){

$(window.document.body).append(content+"br/");

}

//开始拍照

function startPat(){

setTimeout(function(){//防止调用过快

if(context)

{

context.drawImage(video, 0, 0, 320, 320);

CatchCode();

}

},200);

}

//抓屏获取图像流，并上传到服务器

function CatchCode() {

if(canvas!=null)

{

//以下开始编 数据

var imgData = canvas.toDataURL();

//将图像转换为base64数据

var base64Data = 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

div id="support"/div

div id="contentHolder"

video id="video" width="320" height="320" autoplay

/video

canvas style="display:none; background-color:#F00;" id="canvas" width="320" height="320"

/canvas br/

button id="snap" style="display:none; height:50px; width:120px;"开始扫描/button

/div

/body/html

关于移动端代码实例和移动终端编程的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。