移动端开发需要注意的一些问题整合

查看更多精彩前端资源

【前言】

       在移动端开发中,页面在浏览器的移动端模拟器中正常显示还是远远不够的,

真正在移动端开发中，我们还需进行真机测试，下面对一些测试中常见的bug与需要注意的问题进行一个整理！

【本贴整理的章节】

•   meta基础知识
•   默认样式的清除
•   常见的真机测试会出现的bug
  

【meta基础知识】

1、防止手机中网页放大和缩小，这点是最基本的，最为手机网站开发者来说应该都知道的，就是设置meta中的viewport。

[Erlang] 纯文本查看 复制代码

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

用viewport使页面禁止缩放。 通常把user-scalable设置为0来关闭用户对页面视图缩放的行为。完整的viewport设置，当然，user-scalable=0,有的人也写成user-scalable=no，都可以的。

2、忽略将页面中的数字识别为电话号码

[HTML] 纯文本查看 复制代码

<meta name="format-detection" content="telephone=no" />

3、忽略Android平台中对邮箱地址的识别

[HTML] 纯文本查看 复制代码

<meta name="format-detection" content="email=no" />

4、苹果手机的一些设置

   

[Groovy] 纯文本查看 复制代码

<meta name="apple-mobile-web-app-capable" content="yes">

如果content设置为yes，Web应用会以全屏模式运行，反之，则不会。content的默认值是no，表示正常显示。你可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。

5、去掉winphone系统a、input标签被点击时产生的半透明灰色背景

[HTML] 纯文本查看 复制代码

<meta name="msapplication-tap-highlight" content="no">

6、 设置缓存

[Groovy] 纯文本查看 复制代码

<meta http-equiv="Cache-Control" content="no-cache"/>

手机页面通常在第一次加载后会进行缓存，然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache。

【默认样式的清除】

1、ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉

现象：

ios用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置-webkit-tap-highlight-color的alpha值为0，也就是属性值的最后一位设置为0就可以去除半透明灰色遮罩

解决：

[CSS] 纯文本查看 复制代码

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

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

现象：

android用户点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样，可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果

解决：

[CSS] 纯文本查看 复制代码

a,button,input,textarea{

-webkit-tap-highlight-color: rgba(0,0,0,0;)

-webkit-user-modify:read-write-plaintext-only;

}

-webkit-user-modify有个副作用，就是输入法不再能够输入多个字符

另外，有些机型去除不了，如小米2

对于按钮类还有个办法，不使用a或者input标签，直接用div标签

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

[CSS] 纯文本查看 复制代码

element {-webkit-appearance:none;}

4、改变webkit表单输入框placeholder的颜色值

[CSS] 纯文本查看 复制代码

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

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

5、 禁用 select 默认下拉箭头

[CSS] 纯文本查看 复制代码

select::-ms-expand {

display: none;

}

6、禁用 radio 和 checkbox 默认样式

[CSS] 纯文本查看 复制代码

input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{

display: none;

}

【常见的真机测试会出现的bug】

1、 有时候，一些需求要求：某个内容不允许复制，但是手机系统默认长按是可复制的

，所以我们需要禁止ios和android用户选中文字

[CSS] 纯文本查看 复制代码

Element {

    -webkit-user-select: none;

    -moz-user-select: none;

    -khtml-user-select: none;

     user-select: none;

}

2、禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片，长时间按住页面出现闪退

[CSS] 纯文本查看 复制代码

element{-webkit-touch-callout: none}

      

3、上下拉动滚动条时卡顿、慢

[CSS] 纯文本查看 复制代码

body ,html{

  -webkit-overflow-scrolling: touch;

  overflow-scrolling: touch;

}

4、开启硬件加速,解决页面闪白,保证动画流畅

[CSS] 纯文本查看 复制代码

element {

   -webkit-transform: translate3d(0, 0, 0);

   -moz-transform: translate3d(0, 0, 0);

   -ms-transform: translate3d(0, 0, 0);

   transform: translate3d(0, 0, 0);

}

5、播放视频不全屏

[CSS] 纯文本查看 复制代码

<video x-webkit-airplay="true" webkit-playsinline="true" preload="auto" autoplay src="http://"></video>

/*x-webkit-airplay="true"：支持Airplay的设备（如：音箱、Apple TV)播放*/

/*webkit-playsinline="true"：播放视频不全屏*/

6、什么是Retina 显示屏，带来了什么问题

retina：

     一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样带下的屏幕上，苹果设备的retina显示屏中，像素点1个变为4个。

在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为传统PC的2倍

解决方式：

        设计稿切出来的图片长宽保证为偶数，并使用backgroud-size把图片缩小为原来的1/2

        例如图片宽高为：200px*200px，那么写法如下

                  

[CSS] 纯文本查看 复制代码

  element{width:100px;height:100px;background-size:100px 100px;}

                     其它元素的取值为原来的1/2，例如视觉稿40px的字体，使用样式的写法为20px

                    

[CSS] 纯文本查看 复制代码

 element{font-size:20px}

移动端开发需要注意的一些问题整合

查看更多精彩前端资源

【前言】

       在移动端开发中,页面在浏览器的移动端模拟器中正常显示还是远远不够的,

真正在移动端开发中，我们还需进行真机测试，下面对一些测试中常见的bug与需要注意的问题进行一个整理！

【本贴整理的章节】

•   meta基础知识
•   默认样式的清除
•   常见的真机测试会出现的bug
  

【meta基础知识】

1、防止手机中网页放大和缩小，这点是最基本的，最为手机网站开发者来说应该都知道的，就是设置meta中的viewport。

[Erlang] 纯文本查看 复制代码

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

用viewport使页面禁止缩放。 通常把user-scalable设置为0来关闭用户对页面视图缩放的行为。完整的viewport设置，当然，user-scalable=0,有的人也写成user-scalable=no，都可以的。

2、忽略将页面中的数字识别为电话号码

[HTML] 纯文本查看 复制代码

<meta name="format-detection" content="telephone=no" />

3、忽略Android平台中对邮箱地址的识别

[HTML] 纯文本查看 复制代码

<meta name="format-detection" content="email=no" />

4、苹果手机的一些设置

   

[Groovy] 纯文本查看 复制代码

<meta name="apple-mobile-web-app-capable" content="yes">

如果content设置为yes，Web应用会以全屏模式运行，反之，则不会。content的默认值是no，表示正常显示。你可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。

5、去掉winphone系统a、input标签被点击时产生的半透明灰色背景

[HTML] 纯文本查看 复制代码

<meta name="msapplication-tap-highlight" content="no">

6、 设置缓存

[Groovy] 纯文本查看 复制代码

<meta http-equiv="Cache-Control" content="no-cache"/>

手机页面通常在第一次加载后会进行缓存，然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache。

【默认样式的清除】

1、ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉

现象：

ios用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置-webkit-tap-highlight-color的alpha值为0，也就是属性值的最后一位设置为0就可以去除半透明灰色遮罩

解决：

[CSS] 纯文本查看 复制代码

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

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

现象：

android用户点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样，可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果

解决：

[CSS] 纯文本查看 复制代码

a,button,input,textarea{

-webkit-tap-highlight-color: rgba(0,0,0,0;)

-webkit-user-modify:read-write-plaintext-only;

}

-webkit-user-modify有个副作用，就是输入法不再能够输入多个字符

另外，有些机型去除不了，如小米2

对于按钮类还有个办法，不使用a或者input标签，直接用div标签

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

[CSS] 纯文本查看 复制代码

element {-webkit-appearance:none;}

4、改变webkit表单输入框placeholder的颜色值

[CSS] 纯文本查看 复制代码

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

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

5、 禁用 select 默认下拉箭头

[CSS] 纯文本查看 复制代码

select::-ms-expand {

display: none;

}

6、禁用 radio 和 checkbox 默认样式

[CSS] 纯文本查看 复制代码

input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{

display: none;

}

【常见的真机测试会出现的bug】

1、 有时候，一些需求要求：某个内容不允许复制，但是手机系统默认长按是可复制的

，所以我们需要禁止ios和android用户选中文字

[CSS] 纯文本查看 复制代码

Element {

    -webkit-user-select: none;

    -moz-user-select: none;

    -khtml-user-select: none;

     user-select: none;

}

2、禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片，长时间按住页面出现闪退

[CSS] 纯文本查看 复制代码

element{-webkit-touch-callout: none}

      

3、上下拉动滚动条时卡顿、慢

[CSS] 纯文本查看 复制代码

body ,html{

  -webkit-overflow-scrolling: touch;

  overflow-scrolling: touch;

}

4、开启硬件加速,解决页面闪白,保证动画流畅

[CSS] 纯文本查看 复制代码

element {

   -webkit-transform: translate3d(0, 0, 0);

   -moz-transform: translate3d(0, 0, 0);

   -ms-transform: translate3d(0, 0, 0);

   transform: translate3d(0, 0, 0);

}

5、播放视频不全屏

[CSS] 纯文本查看 复制代码

<video x-webkit-airplay="true" webkit-playsinline="true" preload="auto" autoplay src="http://"></video>

/*x-webkit-airplay="true"：支持Airplay的设备（如：音箱、Apple TV)播放*/

/*webkit-playsinline="true"：播放视频不全屏*/

6、什么是Retina 显示屏，带来了什么问题

retina：

     一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样带下的屏幕上，苹果设备的retina显示屏中，像素点1个变为4个。

在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为传统PC的2倍

解决方式：

        设计稿切出来的图片长宽保证为偶数，并使用backgroud-size把图片缩小为原来的1/2

        例如图片宽高为：200px*200px，那么写法如下

                  

[CSS] 纯文本查看 复制代码

  element{width:100px;height:100px;background-size:100px 100px;}

                     其它元素的取值为原来的1/2，例如视觉稿40px的字体，使用样式的写法为20px

                    

[CSS] 纯文本查看 复制代码

 element{font-size:20px}