移动端web学习总结

前言:

  一直想做一个移动端的阶段性学习总结,但是工作太忙总是加班。现在总算可以抽出一点时间来写一写,把知道的都写下来,这样就算忘掉了,也能很快想起来,不要太机智啊,哈哈哈!

一、移动端页面常识

1.常见操作系统:Android、IOS、Firefox、os

2.使用内核:webkit(Android、IOS), greasemonkey(Firefox、os)

3.在移动端上,要使用手势操作代替鼠标输入/输出事件

4.请务必使用响应式布局来设计移动端页面

5.用CSS3动画代替传统的DOM animation(CSS3动画可以使用移动端设备的GPU渲染)

6.移动端开发,要用轻量级框架和库(一切为了快!再快!更快!同时还可以节省用户流量)

7.使用canvas代替image标签(因为image在屌丝机上会让你卡!到!爆!)

8.降低请求数(让你的页面加载速度飞起来!降低后端压力,你好我也好!)

9.合理使用渐变、圆角、阴影(别太多,屌丝机不兼容 T.T )

二、移动端要关注的head头标签

1.<!DOCTYPE html> 告诉浏览器,文档类型是HTML5,不用区分大小写

2.<meta charset="UTF-8" />  声明文档采用的编码格式

3.SEO优化:

<title>标题</title>  定义标题,方便搜索引擎搜索

<meta name="keywords" content="移动主页" />  定义关键字,方便搜索引擎搜索

<meta name="description" content="这是灵魂dancing的个人主页,欢迎参观" />  定义页面描述内容,方便搜索引擎搜索

<meta name="robots" content="index,follow" />  定义网页索引方式,设定站点内容是否公开

  设定为all:文件将被检索,且页面上的链接可以被查询;

  设定为none:文件将不被检索,且页面上的链接不可以被查询;

  设定为index:文件将被检索;

  设定为follow:页面上的链接可以被查询;

  设定为noindex:文件将不被检索,但页面上的链接可以被查询;

  设定为nofollow:文件将不被检索,页面上的链接可以被查询。

<meta name="author" content="灵魂dancing" />  定义网页作者,方便搜索引擎搜索

4.<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />  对于不同移动设备,分辨率物理尺寸不一样,会进行一些缩放,为了展示效果一样就要设置viewport

  width:宽度,width=device-width

  height:高度,height=device-height

  initial-scale:初始缩放比例,initial-scale=1.0

  maximum-scale:最大缩放比例, maximum-scale=1.0

  user-scalable:是否允许用户缩放, user-scalable=yes/no

5.禁止数字自动识别为电话,禁止自动转地址和邮件为链接

<meta content="telephone=no" name="format-detection">

<meta content="address=no" name="format-detection">

6.支持开放内容协议,使你的网页变成“富媒体对象”,支持分享到其他社会化网站,如facebook、人人等

<meta property=og:title content="">

<meta property=og:description content="">

<meta property=og:url content=http://m.baidu.com>

<meta property=og:content content="">

7.IOS设备

<meta name="apple-mobile-web-app-capable" content="yes" />  启用webapp全屏模式

<meta name="apple-mobile-web-app-title" content="灵魂dancing" />  添加页面到桌面时,设置标题

<link  rel="apple-touch-icon-precomposed" href="images/57x57.png" />  IOS的webapp必备!

rel:图片自动处理成圆角和高光效果,apple-touch-icon-precomposed表示禁止自动添加效果,直接显示原图

三、移动端页面图标使用推荐:

1.SVG实现:矢量图标,自适应窗口大小。下面链接是阿里矢量图库,海量图标等你来取~

http://iconfont.cn/repositories

2.CSS3实现:纯CSS3实现的图标,更轻量级,更方便。严重推荐!

http://saeedalipoor.github.io/icono/

四、移动端最佳框架推荐

requireJS:最小巧的javascript载入框架,定义javascript模块。

Zepto.js:使用方法与jQuery相同,轻量级框架,可以认为是jQuery的移动精简版。

五、小技巧

1.可以屏蔽点击元素时出现的阴影,常用于有事件代理的父节点

-webkit-tap-highlight-color: reba(255,255,255,0);

2.使用flex伸缩布局

3.打开数字键盘

<input type=“tel”>

4.隐藏地址栏

setTimeout(function(){

  window.scrollTo(0,1);

},0);

5.使用tap fastclick,解决click延迟问题,防止点击穿透

6.横竖屏切换

<style media=“all and (orienttation:poortrait)” type=“text/css">

  竖屏

</style>

<style media=“all and (orienttation:landscape)” type=“text/css">

  横屏

</style>

内容持续更新中...

如有错误的地方或者更好用的方法,希望大家能在评论区留言指正,让我们共同进步!写的不好,求轻喷~~

时间: 2024-10-31 21:21:20

移动端web学习总结的相关文章

HTML5与移动端web学习笔记

HTML5 提供了很多新的功能,主要有: 新的 HTML 元素,例如 section, nav, header, footer, article 等 用于绘画的 Canvas 元素 用于多媒体播放的 video 和 audio 元素 用于定位的 Geolocation API 本地存储以及离线应用 Web Workers.Web WebSocket API 移动前端开发可分为: 手机网页开发.这部分跟web前端开发差别不大,使用的技术都是html+css+js.区别为手机浏览器是webkit的天

Java Web学习系列——Maven Web项目中集成使用Spring、MyBatis实现对MySQL的数据访问

本篇内容还是建立在上一篇Java Web学习系列——Maven Web项目中集成使用Spring基础之上,对之前的Maven Web项目进行升级改造,实现对MySQL的数据访问. 添加依赖Jar包 这部分内容需要以下Jar包支持 mysql-connector:MySQL数据库连接驱动,架起服务端与数据库沟通的桥梁: MyBatis:一个支持普通SQL查询,存储过程和高级映射的优秀持久层框架: log4j:Apache的开源项目,一个功能强大的日志组件,提供方便的日志记录: 修改后的pom.xm

开发移动端web的一些知识

由于智能机的普及,越来越多网页支持移动端了,那么如何解决适配移动端呢 在这总结一下自己的学习笔记 viewport:虚拟的容器,仅在移动设备有效 <meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0"/> width=device-width:设置宽度为设备宽度 initial-scale=1.0:初始缩放比例1.0 user-scala

Web学习之css

CSS指层叠样式表(Cascading Style Sheets),CSS 是标准的布局语言,用来控制元素的尺寸.颜色.排版.CSS 由 W3C 发明,用来取代基于表格的布局.框架以及其他非标准的表现方法.样式 (style) 定义如何显示 HTML 元素:样式通常存储于样式表中:外部样式表存储于 CSS 文件中. CSS可以解决html代码对样式定义的重复,提高了后期样式代码的可维护性,并增强了网页的显示效果功能.简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能. 1.CSS基础

WEB学习笔记

第一章 ASP.NET基础介绍: 静态网页:相应速度快,主要是.html文件,维护比较麻烦,13亿人口的信息要建13亿个网页,代码是在客户端执行的,代码不需要在服务器上执行,可以包含js的代码 动态网页:页面中包含有需要在web服务器上执行的代码,将结果连同HTML代码一起发给客户端浏览器,无论以何种言语编写的动态网页,到达浏览器的时候都是HTML代码,最常见的动态网页后缀有.jsp/.asp/.php及.aspx WEB服务器主要有:IIS和Apache/  URL地址中的字母不区分大小写 网

JAVA Web学习篇--Servlet

Servlet由来 做过BS项目的人都知道,浏览器可以依据HTML静态标记语言来显示各式各样的网页.可是假设我们须要在网页上完毕一些业务逻辑:比方登陆验证.或者说网页显示的内容在server的数据库中.假设是这样,除了负责显示的HTML标记之外,必须还要有完毕这些业务功能的代码存在.这样的网页我们就叫做动态网页. 对于静态网页而言,server上存在的是一个个纯HTML文件.当client浏览器发出HTTP请求时,server能够依据请求的URL找到相应的HTML文件,并将HTML代码返回给cl

移动端web页面如何适配

移动端web页面如何适配,现有两个方案: 1 设置viewport进行缩放 简单粗暴,使用过程中反应缩放会导致有些页面元素会糊的情况.天猫的web app的首页使用这种方案 在页面中加入viewport.js var doc = window.document, docEle = doc.documentElement, dpr = Math.ceil(window.devicePixelRatio), vp = document.querySelector('meta[name="viewpo

移动端 Web 开发前端知识整理

文章来源: http://www.restran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端 Web 开发前端知识,不定期更新. HTML5 可以做什么 拍照 获取地理位置 手势 canvas 绘图和动画(硬件加速) localstorage,本地缓存 HTML5 动画效果 demo http://fff.cmiscm.com/#!/main CSS3 动画 http://isux.tencent.com/css3/inde

移动端web头像上传实现截取和照片方向修复

实战所需js包: jQuery.Jcrop.EXIF 本次实战功能是在 app 中的 我的客户 的客户信息页面中实现移动端web的头像上传,本次没有实现图像拖拽.缩放的触摸事件功能(Jcrop在这方面的扩展支持实在不够良好,弄了半天没弄出来),若后续有更好的移动端web头像上传插件,可考虑后续替代升级. demo主要实现的关键功能: 图像的方向修正及图像截取 虽然没有实现图像拖拽和双指缩放,但其缩放后的相对于图像的比例计算和拖拽坐标计算规则是一致的,可以参考.同时图像的旋转功能也可参考其中的核心