1、页面头部标签申明

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml" id="test">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <!--禁止浏览器缩放-->

     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

     <meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type" />

     <!--添加 MobileOptimized 标签，告知ios要以320像素的宽度渲染页面，以防在iPhone4s以下发生图片错位的问题-->

     <meta name="MobileOptimized" content="">

     <!--清除浏览器缓存-->

     <meta http-equiv="pragma" content="no-cache">

     <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">

     <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">

     <!--iPhone 手机上设置手机号码不被显示为拨号链接）-->

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

     <!--IOS私有属性，可以添加到主屏幕-->

     <meta name="apple-mobile-web-app-capable" content="yes" />

     <!--屏幕顶部条的颜色-->

     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

     <title>手机webApp</title>

     <!--让IE8，IE9，支持CSS3伪类和属性选择器-->

     <!--[if lte IE ]>

         <script src="scripts/selectivizr.js"></script>

     <![endif]-->

     <!--让IE9以下的浏览器支持Html5标签和媒体查询器（主要用于响应式网站开发）-->

     <!--[if lt IE ]>

         <script src="scripts/css3-mediaqueries.js"></script>

         <script src="scripts/html5shiv.js"></script>

     <![endif]-->

 </head>

2、css中解决手机WebApp字体和图片等标签问题

 /* 禁用iPhone中Safari的字号自动调整 */

 html { -webkit-text-size-adjust: none; }

 /* 设置HTML5元素为块 */

 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

 /* 设置图片视频等自适应调整 */

 img { max-width: %; height: auto; width: auto9; /* ie8 */ }

 .video embed, .video object, .video iframe { width: %; height: auto; }

3、css重置样式

参考：http://www.cnblogs.com/caojiayan/p/6343917.html

 /* CSS Document */

 html, body, div, span, object, iframe,h1, h2,

 h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn,

 em, img, ins,kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd,

 ol, ul, li,fieldset, form, label, legend,table, caption, tbody,

 tfoot,thead,tr, th, td,article, aside, canvas, details, figcaption,

 figure, footer, header, hgroup, menu, nav, section, summary,time, mark,

 audio, video {

     margin:;

     padding:;

     border:;

     outline:;

     font-size:%;

     vertical-align:baseline;

     background:transparent;

     outline-style:none;/*FF*/

 }

 body {

     line-height:;

 }

 a{

     margin:;

     padding:;

     border:;

     font-size:%;

     vertical-align:baseline;

     background:transparent;

 }

 a:hover,a:focus{

     text-decoration:none;

     bblr:expression(this.onFocus=this.blur());/*IE*/

     outline-style:none;/*FF*/

     }

 table {

     border-collapse:collapse;

     border-spacing:;

 }

 input, select {

     vertical-align:middle;

 }

 /*css为clearfix，清除浮动*/

 .clearfix::before,

 .clearfix::after{

     content: "";

     height: ;

     line-height: ;

     display: block;

     visibility: hidden;

     clear: both;

 }

 .clearfix:after{clear:both;}

 .clearfix{

     *zoom:;/*IE/7/6*/

 }

4、关于不同设备的媒体查询

 /*

  * -----------------------------------------

  *  320 ~ 480

  * -----------------------------------------

  */

 @media only screen and (min-width: 320px) and (max-width: 480px) {

 }

 /*

  * -----------------------------------------

  *  321 ~   宽大于321的设备

  * -----------------------------------------

  */

 @media only screen and (min-width: 321px) {

 }

 /*

  * -----------------------------------------

  *  ~ 320  宽小于320的设备

  * -----------------------------------------

  */

 @media only screen and (max-width: 320px) {

 }

 /*

  * -----------------------------------------

  *  ~ 480  宽小于480的设备

  * -----------------------------------------

  */

 @media only screen and (max-width: 480px) {

 }

 /* medium screens (excludes iPad & iPhone) */

 /*

  * -----------------------------------------

  * 481 ~ 767  宽大于480且小于767的iPad和iPhone

  * -----------------------------------------

  */

 @media only screen and (min-width: 481px) and (max-width: 767px) {

 }

 /* ipads (portrait and landscape) */

 /*

  * -----------------------------------------

  * 768 ~ 1024  宽大于480且小于1024的iPad和iPhone

  * -----------------------------------------

  */

 @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

 }

 /* ipads (landscape) */

 /*

  * -----------------------------------------

  * 768 ~ 1024  宽大于480且小于1024的iPad和iPhone

  * -----------------------------------------

  */

 @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {

 }

 /* ipads (portrait) */

 /*

  * -----------------------------------------

  * 768 ~ 1024  宽大于480且小于1024的iPad和iPhone

  * -----------------------------------------

  */

 @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {

 }

 /*

  * -----------------------------------------

  * 1444 ~ 1824  宽大于1444且小于1824的设备

  * -----------------------------------------

  */

 @media only screen and (min-width: 1444px) and (max-width: 1824px){

 }

 /*

  * -----------------------------------------

  * 1824 ~  宽大于1824的设备

  * -----------------------------------------

  */

 @media only screen and (min-width: 1824px) {

 }

 /*

  * -----------------------------------------

  * 2224 ~  宽大于2224的设备

  * -----------------------------------------

  */

 @media only screen and (min-width: 2224px) {

 }

 /* iphone 4 and high pixel ratio (1.5+) devices */

 /*

  * -----------------------------------------

  * iphone4 ~

  * -----------------------------------------

  */

 @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {

 }

 /* iphone 4 and higher pixel ratio (2+) devices (retina) */

 @media only screen and (-webkit-min-device-pixel-ratio: ), only screen and (min-device-pixel-ratio: ) {

 }

webapp中<meta>与css代码部署的更多相关文章

  1. 在Sublime Text 3 中安装SublimeLinter,Node.js进行JS&CSS代码校验

    转载自:http://www.wiibil.com/website/sublimelinter-jshint-csslint.html 在Sublime Text中安装SublimeLinter,No ...

  2. webapp中的meta

    <!--开发后删除--> <meta http-equiv="Pragma" name="no-store" /><!--必须联网 ...

  3. 在SUBLIME TEXT中安装SUBLIMELINTER进行JS&CSS代码校验

    一:Sublime Text 中需要先安装Package Control.(如果有则无需安装) 安装方法:打开Sublime Text控制台(快捷键Ctrl+`),在控制台粘贴以下代码,按回车执行. ...

  4. 在sublimen中整理CSS代码及其兼容性问题

    1,使用鼠标选中前面浅灰色缩进. 2,Ctrl+H 查找替换  点击 Find All 查找全部缩进. 3,按backspace向后删除两次,如下图所示: 4,向下按一次方向键,再向左按一次方向键,最 ...

  5. Dreamweaver 中CSS代码格式化

    首先,用DW打开一个已经写好的css文件,看一下编辑好的,没有格式化之前的代码的样子.   然后,我们点击软件窗口上方的“命令”选项,在弹出的菜单中点击“应用源格式”选项,就可以将我们的代码格式化. ...

  6. grunt-css-sprite css 代码中的切片合并

    安装插件:npm install grunt-css-sprite --save-dev grunt-css-sprite主要功能:1.对 css 文件进行处理,收集切片序列,生成雪碧图2.在原css ...

  7. 将html代码部署到阿里云服务器，并进行域名解析，以及在部署过程中遇到的问题和解决方法

    本博客主要是说一下,,如何将html代码部署到阿里云服务器,并进行域名解析,以及在部署过程中遇到的问题和解决方法. 1.先在阿里云上购买一台阿里云服务器(ECS云服务器): 2.远程连接上该服务器,在 ...

  8. Eclipse中的Web项目自动部署到Tomcat的webapp目录下

    Eclipse中的Web项目自动部署到Tomcat   原因 很长时间没用Eclipse了,近期由于又要用它做个简单的JSP项目,又要重新学习了,虽然熟悉的很快,但记忆总是很模糊,偶尔犯错,以前很少写 ...

  9. 移动端webapp自适应实践（css雪碧图制作小工具实践）图文并茂

    为什么要写这个 以前写过关于webapp自适应屏幕的文章(链接),不过写的大多数群众看不懂,所以来个图文并茂的版本.虽然只是一个简单的页面,不过在做的过程中也遇到了一些问题,也算是好事吧! 该示例gi ...

随机推荐

  1. [JZOJ 5788] 餐馆

    思路: 考虑树形dp. 我们设\(dp[i][j][0/1]\)表示在\(i\)为根的子树中花费\(j\)单位时间,最终回到/不必回到\(i\)的最大收益. 转移三种: \(dp[x][j][0] = ...

  2. 在VC中使用WebBrowser控件的两方法

    ClassWizard方式: 1.创建包装类:View->ClassWizard->Add Class->Form a Type Library->C:/winnt/syste ...

  3. vue通过修改element-ui相关类的样式修改element-ui组件的样式

    可以在App.vue中的style中修改element-ui的样式. .el-menu{ width:160px !important; } 注意:一定要在属性值后面加上 !important 使自己 ...

  4. java读取字符串,生成txt文件

    /** * 读取字符串,生成txt 文件 已解决未设置编码时,在项目中直接打开文件,中文乱码问题 * WriteText.writeToText(musicInfo,fileName)直接调用 * * ...

  5. Java学习之创建对象内存使用机制

    Java内存空间分两种,一种是栈内存,有多个,一种是堆内存,只有一个,在堆内存中又有一块方法区. 方法区中存储的是:类的信息(类名,类的直接父类,类的访问修饰符),类变量,类方法代码,实例方法代码,常 ...

  6. 2019 CCPC 湖南全国邀请赛

    A. Chessboard 做法1 单纯形. 做法2 最大费用可行流问题,行列模型. 对每行建一个点,每列建一个点.物品 \(i\) 在 \((r,c)\),那么 \(r\) 向 \(c\) 连流量为 ...

  7. asp.net Core 获取应用程序所在目录的2种方式

    //获取应用程序所在目录的2种方式(绝对,不受工作目录影响,建议采用此方法获取路径).如:d:\Users\xk\Desktop\WebApplication1\WebApplication1\bin ...

  8. wdatapicker 时间选择器——例

    效果: html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  9. iOS开发系列-NSOperation

    概述 NSOperation是基于GCD的封装更加面向对象,在使用上也是有任务跟队列的概念,分别对应两个类NSOperation .NSOperationQueue NSOperation和NSOpe ...

  10. Oracle如何用单字段或多字段进行查重

    最近在整理数据形成信用报告,发现重复的数据真的多,梳理都好久.我就做个笔记把去掉重复数据的方法整理下来.方便我后期查阅. 我将我目前已知的两种去重方法分为:视图去重和表去重.原理就是有无rowid这个 ...