移动端h5开发总结

2018-07-03 09:22:00 3186 2 编辑:深正互联 来源:互联网

一.手机端开发页面必须要加一段代码:

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

注:这段代码的主要意思是:让页面宽度等于设备宽度,缩放比例为1,禁止用户缩放。用于检测视口,主要的效果就是取消下面的滚动条,让页面适应屏幕。

二.为自己的页面设置最大宽度和最小宽度:

{

max-width:640px;

min-width:320px;

}

主要作用是在屏幕足够大的时候,页面也不会失真。

三.兼容手机屏幕大小不同的情况:

window.onload=window.onresize=function(){

document.documentElement.style.fontSize = document.documentElement.clientWidth*40/640+'px';

};

在写移动端页面的时候要加上这一段代码,这段代码意思是:让视口或者说页面的可见宽度与根元素的字符大小产生对应关系,例如上面这段代码意思是在视口宽度为640px的时候,让根元素的字符大 小为40px(也就是1rem等于40px),这样在视口不断变化的时候,根元素的字符大小也会不断变化,而且有固定的系数(1/16),这样就产生了对应关系,也就是兼容了不同屏幕大小不一样的情况。

具体用法:引用上述js代码,在设计图640px的情况下测量距离,然后在把距离除以40,并把px为rem,这样就可以了,注:js里的40和640可以根据需要灵活更改,但要注意字符默认情况下最小为12px且widow.onload在只能出现一次。

四.去掉 a,input 在移动端浏览器中的默认样式

1.禁止 a 标签背景

在移动端使用 a标签做按钮的时候,点按会出现一个“暗色”的背景,去掉该背景的方法如下:

a,button,input,optgroup,select,textarea {

-webkit-tap-highlight-color:rgba(0,0,0,0); /去掉a、input和button点击时的蓝色外边框和灰色半透明背景/

}

2.禁止长按 a,img 标签长按出现菜单栏

使用 a标签的时候,移动端长按会出现一个 菜单栏,这个时候禁止呼出菜单栏的方法如下

a, img {

-webkit-touch-callout: none; /禁止长按链接与图片弹出菜单/

}

3.流畅滚动

body{

-webkit-overflow-scrolling:touch;

}

4.修改webkit表单输入框placeholder的样式

input::-webkit-input-placeholder{color:#AAAAAA;}

input:focus::-webkit-input-placeholder{color:#EEEEEE;}

5.禁止ios和android用户选中文字

.css{-webkit-user-select:none}

五.其他

1.手机拍照和上传图片

<!-- 选择照片 -->

<input type=file accept="image/">

<!-- 选择视频 -->

<input type=file accept="video/">

2.取消input在ios下,输入的时候英文首字母的默认大写

<input autocapitalize="off" autocorrect="off" />

3.打电话和发短信

<a href="tel:0755-10086">打电话给:0755-10086</a>

<a href="sms:10086">发短信给: 10086</a>

viewport模板

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">

<meta content="yes" name="apple-mobile-web-app-capable"> <!--当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对ios的safari-->

<meta content="black" name="apple-mobile-web-app-status-bar-style"> <!--将网站添加到主屏幕快速启动方式,仅针对ios的safari顶端状态条的样式-->

<meta content="telephone=no" name="format-detection"> <!-- 禁止将页面中的数字识别为电话号码-->

<meta content="email=no" name="format-detection"> <!--忽略Android平台中对邮箱地址的识别-->

<title>title</title>

<link rel="stylesheet" href="index.css">

</head>

<body>

content...

</body>

</html>


本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联

15

技术从业经验

多一份方案,会有收获...

联系深正互联,免费获得专属《策划方案》及报价

在线咨询
微信交谈
拒绝骚扰,我们只想为给您带来一些惊喜...
多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询

深正互联微信
扫描即可沟通