wap端开发必须基础
0.
怎么去写一份比较好的作品展示。
多看国外的网址然后自己模仿。
（1) 做后端系统的各种界面。移动端包含各种页面。（2）各种表单。包含各种下路框，单选按钮，多选按钮，各种加载插件，各种日历插件。
（3) 你做过的各种精致的效果。
(4) 你做的一个比较好的个人css3简历记得那个特别好的效果么。
（5) 开源项目，个人博客地址等等。
（6）各种敏捷开发的方法等等。
0.一些需要看的博客 ：http://blog.csdn.net/binyao02123202/article/details/51629305
http://sc.chinaz.com/info/130410113358.htm
http://www.cnblogs.com/xsilence/p/5774737.html
http://www.uisdc.com/mobile-design-process
1.
initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
在移动设备浏览器上，通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放（zooming）功能。
2. 必要的meta.
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
关于X-UA-Compatible
这是一个，文档兼容模式的定义。
Edge 模式告诉 IE 以最高级模式渲染文档，也就是任何 IE 版本都以当前版本所支持的最高级标准模式渲染，避免版本升级造成的影响。简单的说，就是什么版本 IE 就用什么版本的标准模式渲染
<meta http-equiv="X-UA-Compatible" content="IE=edge">
使用以下代码强制 IE 使用 Chrome Frame 渲染
<meta http-equiv="X-UA-Compatible" content="chrome=1">
提示 IE 用户安装 Google Frame
Google 官方提供了对 Google Frame 插件安装情况的检测，这里直接调用方法即可，如果检测到 IE 并未安装 Google Frame，则弹出对话框提示安装。
<script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script><script>CFInstall.check();</script>
最佳的兼容模式方案，结合考虑以上两种：
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Cache-Control" content="no-transform"/>这个是百度官方给的禁止转码声明。在网页中添加了这一条，百度就不会移动搜索中将网站转码，并呈现给移动端用户。
<meta http-equiv="Cache-Control"content="max-age=0"/> 页面缓存时间的最大值是0秒，目的是不让页面缓存，每次访问必须到服务器读取
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=2.0, user-scalable=1"> -->
<meta name="apple-mobile-web-app-capable" content="yes">
默认浏览器全屏
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="default">
后safari保存到主屏幕后,网页打开能全屏了,但是,按下Hone键回到主页面,然后再点击图标,上次的Cookie和localStorage全部被自动清空了,怎么设置才能使其不清空!!!!!!
或者有什么其他的存储本地html数据方法收起
如果safari不开启全屏模式,也就是<meta name="apple-mobile-web-app-capable" content="yes"/>这句代码不加在html里面,那么通过safari浏览该html的时候保存的Cookie等其他数据不会被清空
但是开启了全屏模式,并且将此快捷键保存到手机桌面上,通过桌面上的图标打开该网站后,然后按下hone键回到桌面,再通过桌面上的图标打开该网站,发现数据全被清空了.也就是好像safari全屏模式下浏览网页,按下hone键就会清空数据一样?
<meta name="layoutmode" content="standard">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> 作用是控制状态栏显示样式
<meta name="renderer" content="webkit">
<!--uc浏览器判断到页面上文字居多时，会自动放大字体优化移动用户体验。添加以下头部可以禁用掉该优化-->
<meta name="wap-font-scale" content="no">
<meta content="telephone=no" name="format-detection" />
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
一般情况系可以考虑用到的代码：
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="Cache-Control" content="no-transform"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=2.0, user-scalable=1"> --> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="layoutmode" content="standard"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="renderer" content="webkit">
3. css之px自动转rem—sublime 插件CSSREM http://www.cnblogs.com/olivianate/p/5328716.html
4. 可以考虑引入这个css https://github.com/lzxb/flex.css
5.也是一种移动端比较流行的布局方式，我体验了一下，不太好用哈
var iScale = 1;
iScale = iScale/window.devicePixelRatio;
document.write();//这里边写iScale的的meta
var iWidth = document.documentElement.clientWidth/16;
document.getElementByTagName('html')[0].style.fontSize = iWidth + 'px';
