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移动开发小贴士的更多相关文章
- 移动web app开发小贴士 收藏有用
1 创建主屏幕图标 (Creating a home screen icon ,for ios) 1 2 3 4 5 6 //57*57 <link rel="apple-touc ...
- Web开发小贴士 -- 全面了解Cookie
一.Cookie的出现 浏览器和服务器之间的通信少不了HTTP协议,但是因为HTTP协议是无状态的,所以服务器并不知道上一次浏览器做了什么样的操作,这样严重阻碍了交互式Web应用程序的实现. 针对上述 ...
- Untiy3D开发小贴士 OnEnabled与OnDisabled
设某个组件为NewBehaviour OnEnabled被调用的情况: 1.GameObject添加组件的时候,即AddComponet<NewBehaviour> : 2.包含3.已添加 ...
- SharePoint每日小贴士Web部件
SharePoint每日小贴士Web部件 项目描写叙述 此Web部件从指定SP自己定义列表或一个选定的 RSS源选择一个随机项目.并显示一张图片.标题和一个Tip. 适 ...
- 移动Web开发小技巧
移动Web开发小技巧 添加到主屏后的标题(IOS) name="apple-mobile-web-app-title" content="标题"> 启用 ...
- Web前端开发最佳实践(7):使用合理的技术方案来构建小图标
大家都对网站上使用的小图标肯定都不陌生,这些小图标作为网站内容的点缀,增加了网站的美观度,提高了用户体验,可是你有没有看过在这些网站中使用的图标都是用什么技术实现的?虽然大部分网站还是使用普通的图片实 ...
- Web前端开发中的小错误
Web前端开发中的小错误 错误1:表单的label标签跟表单字段没有关联 利用“for”属性允许用户单击label也可以选中表单中的内容.这可以扩大复选框和单选框的点击区域,非常实用. 错误2:log ...
- 用grunt搭建web前端开发环境
1.前言 本文章旨在讲解grunt入门,以及讲解grunt最常用的几个插件的使用. 2.安装node.js Grunt和所有grunt插件都是基于nodejs来运行的,如果你的电脑上没有nodejs, ...
- web前端开发学习内容
应该 具备的 知识技能 :懂web标准,熟练手写 xhtml css3 并符合 符合w3c标准 代码能 兼容主流浏览器.ie6.7.8.9 ff 等. ...
随机推荐
- 对BOM的总结
参考:JavaScript半知半解 TG著 BOM对象 Window对象是客户端JavaScript程序的全局对象. Window对象使得JavaScript与浏览器进行交互. 所有的JavaScri ...
- springmvc框架使用拦截器实现301永久重定向,其实用过滤器应该是更好
做seo的朋友提出要求 所有不带www.的访问需要301到带www的域名,以集中权重 可以使用过滤器检查servername带不带www,也可以使用拦截器 不会配置过滤器,所以先用拦截器实现吧,不过我 ...
- 网页上PNG透明图片的运用(ie6+滤镜)
PNG ( Portable Network Graphics ) 格式的无损压缩和半透明特性对增强网页效果减少网页体积有着重要的作用,但由于 IE6 不支持 PNG,所以一直未能得到广泛的应用. 虽 ...
- quartz 通用的多线程定时任务
TaskManager package mytest.task; import java.text.ParseException; import org.quartz.CronTrigger; imp ...
- POJ1182 NOI2001 食物链
食物链 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 77428 Accepted: 23067 Description ...
- node的源码安装
Node.js 安装配置 本章节我们将向大家介绍在 Windows 和 Linux 上安装 Node.js 的方法. 本安装教程以 Node.js v4.4.3 LTS(长期支持版本)版本为例. No ...
- spring和mybatis整合遇到org.springframework.beans.factory.BeanDefinitionStoreException
今天对spring和mybatis整合进行练习,通过MapperScannerConfigurer进行mapper扫描 但是在进行单元测试的时候,死活就是报错,具体报错如下: org.springfr ...
- 洛谷3953 (NOIp2017) 逛公园——记忆化搜索+用栈判0环
题目:https://www.luogu.org/problemnew/show/P3953 因为K只有50,所以想到用dp[ cr ][ j ]表示在点cr.比最短路多走了 j 的方案数.(看了TJ ...
- C#中Object转化为json对象
比如定义一个类: public class Lines { public string X1 { get; set; } public string X2 { get; set; } public s ...
- 【JZOJ5071】【GDSOI2017第二轮模拟】奶酪 树形dp
题面 CJY很喜欢吃奶酪,于是YJC弄到了一些奶酪,现在YJC决定和CJY分享奶酪. YJC弄到了n-1块奶酪,于是他把奶酪挂在了一棵n个结点的树上,每根树枝上挂一块奶酪,每块奶酪都有重量. YJC和 ...