web移动开发小贴士

1、判断手机类型

var u = navigator.userAgent;

var isAndroid = u.indexOf('Android') > - || u.indexOf('Adr') > -; //android

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

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

Element{

    -webkit-appearance: none;

}

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

Element {

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

}

但这个方法在三星的机子上无效，有一种妥协的方法是把页面非真实跳转链接的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"></a>

开启短信功能：

<a href="sms:123456"></a>

同样地，我们也可以通过标签属性来开启长按邮箱地址弹出邮件发送的功能：

<a mailto:dooyoe@gmail.com">dooyoe@gmail.com</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(,,,;)}

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

<input type="text" autocorrect="off" />

15. 禁止文本缩放
当移动设备横竖屏切换时，文本的大小会重新计算，进行相应的缩放，当我们不需要这种情况时，可以选择禁止：

html {-webkit-text-size-adjust: %;}

需要注意的是，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(, , );

   -moz-transform: translate3d(, , );

   -ms-transform: translate3d(, , );

   transform: translate3d(, , );

}

设计高性能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移动开发小贴士

最新文章

热门文章