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';