移动开发记录开发移动端中碰到的问题,基础知识点，开发过程中碰到的一些问题记录；记录开发移动端中碰到的问题,基础知识点

记录开发移动端中碰到的问题

meta基础知识

该标签可以使移动设备开发时使用ideal viewport

width=device-width: 让当前viewport宽度等于设备的宽度
user-scalable=no: 禁止用户缩放
initial-scale=1.0: 设置页面的初始缩放值为不缩放
maximum-scale=1.0: 允许用户的最大缩放值为1.0
minimum-scale=1.0: 允许用户的最小缩放值为1.0

css像素 DPI ppi

参考资料1 CSS像素

点距

点距指是指屏幕上相邻两个同色像素单元之间的距离，即两个红色（或绿、蓝）像素单元之间的距离。

ppi：每英寸多少像素数，放到显示器上说的是每英寸多少物理像素及显示器设备的点距。
dpi：每英寸多少点。

在ios中出现圆角,兼容处理方法

input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="text"],{
  -webkit-appearance: none;
  border-radius: 0;
}

ios 滚动不流畅的问题

overflow-x: hidden; 
overflow-y: auto;
-webkit-overflow-scrolling: touch;

圆角bug

某些Android手机圆角失效

background-clip:padding-box;

图片失真

在移动端中，图片的处理应该是很谨慎的，假设有一张图片本身的尺寸是XXX宽，设置和包裹它的div一样宽，如果是div宽度小于图片宽度没有问题，但是如果div宽度大于图片的宽度，图片被拉伸失真
解决方法：让图片最大只能是自己的宽度

img{
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

设置问题为 10px ,甚至更小

假如设计给你的字体大小是10px,你设置了font-size:10px，此时在PC中测试并不会看到效果；一种有用的方法是

font-size: 12px //PC中Chrome的最小字体
transform: scale(0.833333333);
height: 12px; //设计给的高度是10px
line-height: 12px;

滚动穿透

在弹窗打开的时候给body的全局滚动设置position:fixed属性，并设置top值；由于设置了fixed属性，那在弹窗的时候body就没有滚动条了。此时如果这么设置会发现body虽然没有了滚动穿透，但是原来的位置丢失了。所以再给body设置fixed属性的时候，要把当前的滚动位置赋值给css的top属性，那在视觉上就没有任何变化了。

fixedBody () {
        let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
        document.body.style.cssText += 'position:fixed;width:100%;top:-' + scrollTop + 'px;'
     }

那在弹窗关闭的时候如何处理呢？弹窗关闭的时候则要清除fixed固定定位和top值；并设置其滚动位置位置top值，则又恢复了滚动功能，而且视觉上没有任何变化，是目前最完美的解决方案

looseBody () {
    let body = document.body
    body.style.position = ''
    let top = body.style.top
    document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top)
    body.style.top = ''
  }

以上两种方案解决了固定弹窗和滚动弹窗对于body全局滚动的影响。

点击穿透

阻止点击穿透，上层点击时加上下面这句，阻止事件冒泡到父元素

event.stopPropagation();

实现点击穿透

点击穿透到下面一层，不点击上层，为上层添加下面样式代码即可

pointer-events: none;

IOS键盘字母输入，默认首字母大写

Q: 如题 A: 解决方案：

<input type="text" autocapitalize="off"

select 对齐

Q: 如题，默认是左对齐，产品有其他需求 A: 解决方案：
select option {
direction: rtl;
}

inline-block元素使用vertical-align后，父元素高度被莫名撑开

Q: 如题，不一定出现在移动端，但是移动端会效果比较严重，一般是用于设置同行内容垂直居中的 A: 解决方案：

.par{
font-size:0
}

iOS中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格

-通过正则替换

this.value = this.value.replace(/\u2006/g, '');

Retina屏的1px边框

解决方案：

Element{
  border-width: thin;
}

ios 不能自动播放

动态创建一个audio标签，并把视频地址赋给新创建的标签，并自动播放即可

当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari

<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- ios7.0版本以后，safari上已看不到效果 -->

将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式

<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 可选default、black、black-translucent -->

viewport模板

<!-- H5页面窗口自动调整到设备宽度，并禁止用户缩放页面-->
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'>
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
</html>

常见问题

移动端如何定义字体font-family 各个手机系统有自己的默认字体，且都不支持微软雅黑,如无特殊需求，手机端无需定义中文字体，使用系统默认,英文字体和数字字体可使用 Helvetica ，三种系统都支持

移动端字体单位font-size选择px还是rem

对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备

ios系统中元素被触摸时产生的半透明灰色遮罩

 a,button,input,textarea{
 -webkit-tap-highlight-color: rgba(0,0,0,0;)
 }

部分android系统中元素被点击时产生的边框怎么去掉

 a,button,input,textarea{
 -webkit-user-modify:read-write-plaintext-only; 
 }

webkit表单元素的默认外观怎么重置

.css{-webkit-appearance:none;}

webkit表单输入框placeholder的文字能换行么

方法一：&#10

<textarea rows="5" cols="50" placeholder="1、textarea&#10;2、success"></textarea>

方法二：使用脚本

<!DOCTYPE html>
<html>
<head>
    <title>textarea placeholder换行</title>
</head>
<body>
<textarea rows="5" cols="50" ></textarea>
<textarea rows="5" cols="50" placeholder="1、textarea&#10;2、success"></textarea>
<script type="text/javascript">
    document.querySelector('textarea').setAttribute('placeholder','1、textarea\n2、success')
</script>
</body>
</html>

禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片

.css{-webkit-touch-callout: none}

禁止ios和android用户选中文字

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

打电话发短信的怎么实现？

<a href="tel:13764567708">移动WEB页面JS一键拨打号码咨询功能</a>

一键发送短信功能：

<a href="sms:13764567708">移动WEB页面JS一键发送短信咨询功能</a>

消除transition闪屏

.css{

-webkit-transform-style:preserve-3d;

-webkit-backface-visibility:hidden;-webkit-perspective:1000;
    
}

取消input在ios下，输入的时候英文首字母的默认大写,android上去掉语音输入按钮

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

检测当前设备是手机端还是移动端

<script type="text/javascript">
	//平台、设备和操作系统
	var system ={
		win : false,
		mac : false,
		xll : false
	};
	//检测平台
	var p = navigator.platform;
	system.win = p.indexOf("Win") == 0;
	system.mac = p.indexOf("Mac") == 0;
	system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
 
	if(system.win||system.mac||system.xll){
		//PC端
		alert('现在是电脑');
	}else{
		//移动端跳转的链接
		alert('现在是手机');
	}
</script>

弹出框被软键盘遮挡

不要在有 input 标签的页面使用 fixed 定位，尽量用absolute 或者 flex 替换 fixed
因为这两者在一起的时候，总是会有奇奇怪怪的问题。

检测软键盘是否弹起

var winHeight = $(window).height();
$(window).resize(function() {
    var thisHeight = $(this).height();
    if (winHeight - thisHeight > 50) {
        //当软键盘弹出
         $('body').css('height', winHeight + 'px');
    } else {
         //当软键盘收起
        $('body').css('height', '100%');
    }
});

300ms的延迟响应

引入fastclick库来解决
ios11 解决了这个问题，所以如果再引入 fastclick，会有冲突产生

移动开发