web移动开发小贴士

Posted 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" 时生效。 

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

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

6、设置缓存

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

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

7、桌面图标

<link rel="apple-touch-icon" href="touch-icon-iphone.png" />

<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png" />

<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png" />

<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png" />

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

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

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

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

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

<meta name="format-detection" content="telephone=no" />
开启电话功能

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

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

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开发———第三天

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