移动端h5开发总结不断更新中....

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

<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); }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>

移动端h5开发总结不断更新中....相关推荐

在移动端H5开发中(关于安卓端position:fixed和position:absolute；和虚拟键盘冲突的问题，以及解决方案)
在移动端H5开发中(关于安卓端position:fixed和position:absolute:和虚拟键盘冲突的问题,以及解决方案) 参考文章: (1)在移动端H5开发中(关于安卓端position: ...
html5 拖拽滚动条,js 简易版滚动条实例(适用于移动端H5开发)
废话不多说,直接上代码滑动条 *{ margin: 0; padding: 0; } #content{ margin-top: 50px; width:100%; height: 200px; b ...
移动端H5开发遇到的问题
移动端开发必会出现的问题和解决方案 H5开发过程中难免会遇到一些兼容性等爬过坑的问题移动端 H5 相关问题汇总: 1px 问题响应式布局 iOS 滑动不流畅 iOS 上拉边界下拉出现白色空白页面 ...
移动端h5开发分辨率自适应
在做H5开发时,都会遇到屏幕分辨率自适应问题,那么怎么更好地让页面自适应? 这里介绍一种用js计算屏幕宽度+rem单位的方法(网易新闻在用) 不同手机有不同的分辨率,UI在做设计图的时候大都会以iPh ...
记一次移动端H5开发所遇到的问题与细节,以及ios兼容
第一次弄移动端H5项目开发,虽然是简单的页面展示,但也遇到了很多细节问题与兼容问题,尤其是h5视频标签video, 一.移动端禁止缩放兼容 <meta name="viewport& ...
移动端H5开发不了解一下抓包嘛？
在PC项目开发中,一般会使用Chrome的开发者工具进行调试,亦或是其他浏览器的开发工具进行调试. 在平常开发中,我一般会使用Chrome或者是Safari进行调试. Chrome的功能非常强大,它的 ...
钉钉端H5开发调试怎么搞
H5开发本地调试教程作为一名前端开发,大家平时工作中或多或少都有接触或需要开发H5页面的场景,在开发过程中,如何像PC端页面一样有有丝滑的体验呢? 不同的情况需要在不同的端调试更方便有效: 1. 在 ...
移动端h5开发,华为手机输入法键盘影响页面布局的问题。
在做移动端h5的时候,有些简单的页面,我们一般都会给body写上: width:100%; height:100%; 然后给一个满屏的背景图,简单方便的适应不同屏幕的手机. 有时候为了采集用户信息,页 ...
移动端 h5开发相关内容总结——CSS篇
1.移动端开发视窗口的添加 h5端开发下面这段话是必须配置的 <meta name="viewport" content="width=device-width, ...

移动端h5开发总结不断更新中....

移动端h5开发总结不断更新中....相关推荐

最新文章

热门文章