建设移动端web开发会涉及到的meta标签
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="address=no">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
性能优化-------更快,交互优化---------更好用,让用户感知到的响应速度。
知识点一:移动端点击click事件,会有三百毫秒的迟钝。产生的原因是移动端手机为区分点击还是双击,来判断用户是点击还是想放大、缩小,所以就会有延迟来判断。
解决办法:1、引入移动端框架如zepTo.js,不使用click事件而是使用tab事件,但是用户体验还不是最佳,可以给用户加一个点击态,如加一个active伪类。
知识点二:移动端滚动特别缓慢,不流畅。全局滚动(在body上),局部滚动(在body之内)。
解决办法:1、在ios中,如为全局滚动,默认有弹性滚动效果,如为布局滚动,则没有弹性滚动效果,需要在body和滚动元素scroll-el上加上样式。
body{[-webkit-overflow-scrolling: touch}
.scroll-el{overflow: auto}
2、在Android在,只使用全局滚动效果。如果顶部或者底部有固定的内容,中间区域怎么实现全局滚动呢?解决办法是在中间区域加上padding-top或者padding-bottom。
知识点三:定制移动端键盘样式定制。
解决:定制input的type属性。如url、email、tel、number、search
建设移动端web开发会涉及到的meta标签的更多相关文章
- 移动端 Web 开发前端知识整理
文章来源: http://www.restran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端 Web 开发前端知识,不定期更新. ...
- 移动端web开发的一些知识点
整理一下自己平时移动端web开发中遇到的问题,也参考一下前辈的一些总结 1.最常见的要数1像素边框了 因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在dpr=2的retina屏下会显示成 ...
- 【前端】移动端Web开发学习笔记【2】 & flex布局
上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...
- 【前端】移动端Web开发学习笔记【1】
下一篇:移动端Web开发学习笔记[2] Part 1: 两篇重要的博客 有两篇翻译过来的博客值得一看: 两个viewport的故事(第一部分) 两个viewport的故事(第二部分) 这两篇博客探讨了 ...
- 移动端web开发基础概念
最近在了解移动端web开发的相关知识,有些概念总是模糊不清,这次花费了一些时间整体的梳理了一遍. 分辨率 分辨率可以从显示分辨率与图像分辨率两个方向来分类.显示分辨率(屏幕分辨率)是屏幕图像的精密度, ...
- 移动端Web开发注意点
不用考虑浏览器兼容性 移动端开发主要对象是手持设备,其中绝大部分是IOS和Android系统,so,在开发此类页面时不必纠结IE和其他一些2B浏览器的兼容性,webkit是本次开发重点. 当然,不同版 ...
- 移动端Web开发如何处理横竖屏
<!Doctype html> <html> <head> <meta charset="utf-8"> <meta id=& ...
- 移动端web开发技巧(转)
原文链接:http://liujinkai.com/2015/06/06/mobile-web-skill/ 移动端web开发技巧 这是一个最好的时代,因为我们站在潮流中:但也是一个最坏的时代,因为我 ...
- 安卓手机移动端Web开发调试之Chrome远程调试(Remote Debugging)
一.让安卓打debug模式的apk包 二.将电脑中的chrome升级到最新版本,在chrome浏览器地址栏中输入chrome://inspect/#devices: 在智能手机还未普及时,移动设备的调 ...
随机推荐
- 《UNIX网络编程(第3版)》unp.h等源码文件的编译安装
操作系统:Mac OS X 10.11.5 1.下载书中的源代码:点击下载 2.切换到解压后的目录 unpv13e,先查看下 README,依次执行: ./configure cd lib make ...
- BZOJ4590——[Shoi2015]自动刷题机
1.题意:题意很简洁吧,就不概括了 2.分析:我思考了半天,我猜答案满足单调...没敢写,看了题解去问Claris为啥单调,Claris一句话" 因为n越大明显不可能做更多题 ", ...
- BZOJ4551——[Tjoi2016&Heoi2016]树
1.题意: 给定一颗有根树(根为1),有以下 两种操作:1. 标记操作:对某个结点打上标记(在最开始,只有结点1有标记,其他结点均无标记,而且对于某个 结点,可以打多次标记.)2. 询问操作:询问某个 ...
- js parseInt 显示0
parseInt 有第二个参数, 就是进制参数 parseInt("08", 10); //表示这个数字是十进制的就不会出错了.
- Servlet 之 HttpServlet
package cn.jiemoxiaodi.http; import java.io.IOException; import javax.servlet.GenericServlet; import ...
- java12
1:List的子类(掌握) (1)List的子类特点 ArrayList: 底层数据结构是数组,查询快,增删慢 线程不安全,效率高 Vector: 底层数据结构是数组,查询快,增删慢 线程安全,效率低 ...
- MySQL备份之【mydumper 学习】
MySQL在备份方面包含了自身的mysqldump工具,但其只支持单线程工作,这就使得它无法迅速的备份数据.而mydumper作为一个实用工具,能够良好支持多线程工作,这使得它在处理速度方面十倍于传统 ...
- asp.net mvc 多级文件夹
ASP.NET MVC - 定制属于你自己的ViewEngine 标签: asp.netmvcstring引擎razorapplication 2012-07-26 14:17 5365人阅读 评论( ...
- 【python】点分十进制ip与数字互转
来源:http://www.cnblogs.com/vovlie/archive/2012/10/17/2727029.html 利用lambda表达式,非常简洁 int_to_ip = lambda ...
- FreeRTOS学习及移植笔记之一:开始FreeRTOS之旅
1.必要的准备工作 工欲善其事,必先利其器,在开始学习和移植之前,相应的准备工作必不可少.所以在开始我们写要准备如下: 测试环境:我准备在STM32F103平台上移植和测试FreeRTOS系统 准备F ...