web移动开发小贴士

Posted 2020-10-07 for_tomorrow

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web移动开发小贴士相关的知识，希望对你有一定的参考价值。

1、判断手机类型

var u = navigator.userAgent;

var isandroid = u.indexOf(‘Android‘) > -1 || u.indexOf(‘Adr‘) > -1; //android

var isios = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

2、iphone及ipad下输入框默认内阴影

Element{

-webkit-appearance: none;

}

3、ios和android下触摸元素时出现半透明灰色遮罩

Element {

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

}

但这个方法在三星的机子上无效，有一种妥协的方法是把页面非真实跳转链接的a标签换成其它标签，可以解决这个问题。

4、Retina屏的1px边框

Element{

border-width: thin;

}

5、顶部状态栏背景色（ios）

设置状态栏的背景颜色，只有在 "apple-mobile-web-app-capable" content="yes" 时生效。

content 参数：
default ：状态栏背景是白色。
black ：状态栏背景是黑色。
black-translucent ：状态栏背景是半透明。如果设置为 default 或 black ,网页内容从状态栏底部开始。如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。

6、设置缓存

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

7、桌面图标

8、IOS中input键盘事件keyup、keydown、keypress支持不是很好

解决方法：可以用html5的oninput事件去代替keyup

9、百度禁止转码
通过百度手机打开网页时，百度可能会对你的网页进行转码，往你页面贴上它的广告，非常之恶心。不过我们可以通过这个meta标签来禁止它：

可能还有其他类型的数字也会被识别。我们可以通过如下的meta来关闭电话号码的自动识别：

<a href="tel:123456">123456</a>
开启短信功能：
<a href="sms:123456">123456</a>

同样地，我们也可以通过标签属性来开启长按邮箱地址弹出邮件发送的功能：
<a mailto:[email protected]">[email protected]</a>

10、点击延迟

fastclick可以解决在手机上点击事件的300ms延迟。
zepto的touch模块，tap事件也是为了解决在click的延迟问题。

11、什么是Retina 显示屏，带来了什么问题
retina：一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样大小的屏幕上，苹果设备的retina显示屏中，像素点1个变为4个。
在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为传统PC的2倍。
那么，前端的应对方案是：
设计稿切出来的图片长宽保证为偶数，并使用backgroud-size把图片缩小为原来的1/2
//例如图片宽高为：200px*200px，那么写法如下
.css{width:100px;height:100px;background-size:100px 100px;}
其它元素的取值为原来的1/2，例如视觉稿40px的字体，使用样式的写法为20px。

12、webkit表单输入框placeholder的颜色值能改变么？

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

13、ios系统中元素被触摸时产生的半透明灰色遮罩
ios用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置-webkit-tap-highlight-color的alpha值为0，也就是属性值的最后一位设置为0就可以去除半透明灰色遮罩。
a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}

14、关闭iOS输入自动修正
和英文输入默认自动首字母大写那样，IOS还做了一个功能，默认输入法会开启自动修正输入内容，这样的话，用户经常要操作两次。如果不希望开启此功能，我们可以通过input标签属性来关闭掉：
<input type="text" autocorrect="off" />

15. 禁止文本缩放
当移动设备横竖屏切换时，文本的大小会重新计算，进行相应的缩放，当我们不需要这种情况时，可以选择禁止：
html {-webkit-text-size-adjust: 100%;}

需要注意的是，PC端的该属性已经被移除，该属性在移动端要生效，必须设置 ‘meta viewport’。

16、移动端禁止选中内容
如果你不想用户可以选中页面中的内容，那么你可以在css中禁掉：

.user-select-none {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

17、如何禁止保存或拷贝图像（IOS）

通常当你在手机或者pad上长按图像 img ，会弹出选项存储图像或者拷贝图像，如果你不想让用户这么操作，那么你可以通过以下方法来禁止：
img { -webkit-touch-callout: none; }
移动端定义字体

18、三大手机系统的字体：
　　ios 系统
　　　　默认中文字体是Heiti SC
　　　　默认英文字体是Helvetica
　　　　默认数字字体是HelveticaNeue
　　　　无微软雅黑字体
　　android 系统
　　　　默认中文字体是Droidsansfallback
　　　　默认英文和数字字体是Droid Sans
　　　　无微软雅黑字体
　　winphone 系统
　　　　默认中文字体是Dengxian(方正等线体)
　　　　默认英文和数字字体是Segoe
　　　　无微软雅黑字体
　　各个手机系统有自己的默认字体，且都不支持微软雅黑如无特殊需求，手机端无需定义中文字体，使用系统默认英文字体和数字字体可使用 Helvetica ，三种系统都支持。

19、webkit表单元素的默认外观怎么重置
.css{-webkit-appearance:none;}

20、消除transition闪屏

.css{
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
}
.css {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

设计高性能CSS3动画的几个要素
　　a、尽可能地使用合成属性transform和opacity来设计CSS3动画，
　　b、不使用position的left和top来定位

　　c、利用translate3D开启GPU加速

21、工具推荐

1）. 移动端基础框架
　　zepto.js 语法与jquery几乎一样，会jquery基本会zepto~
　　iscroll.js 解决页面不支持弹性滚动，不支持fixed引起的问题~ 实现下拉刷新，滑屏，缩放等功能~
　　underscore.js 该库提供了一整套函数式编程的实用功能，但是没有扩展任何javascript内置对象。
　　fastclick 加快移动端点击响应时间
　　animate.css CSS3动画效果库
2）. 滑屏框架
　　适合上下滑屏、左右滑屏等滑屏切换页面的效果
　　slip.js iSlider.js fullpage.js swiper
3）. 瀑布流框架
　　masonry
4）. 其他工具推荐
　　caniuse 各浏览器支持html5属性查询
　　paletton 调色搭配

以上是关于web移动开发小贴士的主要内容，如果未能解决你的问题，请参考以下文章

HUAWEI HiAI常见FAQ小贴士

#本周小贴士#77：临时的，移动的，和拷贝的

移动Web开发技巧汇总

移动web开发———第三天

移动端Web开发流式布局flex布局rem布局