webapp中<meta>与css代码部署

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代码部署的更多相关文章

在Sublime Text 3 中安装SublimeLinter,Node.js进行JS&CSS代码校验
转载自:http://www.wiibil.com/website/sublimelinter-jshint-csslint.html 在Sublime Text中安装SublimeLinter,No ...
webapp中的meta
 <meta http-equiv="Pragma" name="no-store" /><!--必须联网 ...
在SUBLIME TEXT中安装SUBLIMELINTER进行JS&CSS代码校验
一:Sublime Text 中需要先安装Package Control.(如果有则无需安装) 安装方法:打开Sublime Text控制台(快捷键Ctrl+`),在控制台粘贴以下代码,按回车执行. ...
在sublimen中整理CSS代码及其兼容性问题
1,使用鼠标选中前面浅灰色缩进. 2,Ctrl+H 查找替换点击 Find All 查找全部缩进. 3,按backspace向后删除两次,如下图所示: 4,向下按一次方向键,再向左按一次方向键,最 ...
Dreamweaver 中CSS代码格式化
首先,用DW打开一个已经写好的css文件,看一下编辑好的,没有格式化之前的代码的样子. 然后,我们点击软件窗口上方的“命令”选项,在弹出的菜单中点击“应用源格式”选项,就可以将我们的代码格式化. ...
grunt-css-sprite css 代码中的切片合并
安装插件:npm install grunt-css-sprite --save-dev grunt-css-sprite主要功能:1.对 css 文件进行处理,收集切片序列,生成雪碧图2.在原css ...
将html代码部署到阿里云服务器，并进行域名解析，以及在部署过程中遇到的问题和解决方法
本博客主要是说一下,,如何将html代码部署到阿里云服务器,并进行域名解析,以及在部署过程中遇到的问题和解决方法. 1.先在阿里云上购买一台阿里云服务器(ECS云服务器): 2.远程连接上该服务器,在 ...
Eclipse中的Web项目自动部署到Tomcat的webapp目录下
Eclipse中的Web项目自动部署到Tomcat 原因很长时间没用Eclipse了,近期由于又要用它做个简单的JSP项目,又要重新学习了,虽然熟悉的很快,但记忆总是很模糊,偶尔犯错,以前很少写 ...
移动端webapp自适应实践（css雪碧图制作小工具实践）图文并茂
为什么要写这个以前写过关于webapp自适应屏幕的文章(链接),不过写的大多数群众看不懂,所以来个图文并茂的版本.虽然只是一个简单的页面,不过在做的过程中也遇到了一些问题,也算是好事吧! 该示例gi ...

随机推荐

gitbook新版本"gitbook build"命令导出的html不能跳转的解决办法
使用的是win7系统,gitbook新版本不支持html跳转功能,所以要降版本至2.6.7 解决办法如下: 第一步: 生成时指定gitbook的版本, 本地没有会先下载 gitbook build - ...
LOJ#6437. 「PKUSC2018」PKUSC
题面题意转化为: 判断每个点所在的圆有多长的弧度角位于多边形内部. 然后就很暴力了. 每个点P,直接找到多边形和这个圆的所有交点,按照距离P的角度排序. 找交点,直接联立二元二次方程组.... 需要 ...
error LNK2001: unresolved external symbol _main解决办法(zz)
error LNK2001: unresolved external symbol _main解决办法解决外部符号错误:_main,_WinMain@16,__beginthreadex -!t ...
node.js在ubuntu上和windows上的安装
Ubuntu 上安装 Node.js Node.js 源码安装以下部分我们将介绍在Ubuntu Linux下安装 Node.js . 其他的Linux系统,如Centos等类似如下安装步骤. 在 G ...
hive 总结三（压缩）
本文参考:黑泽君相关博客本文是我总结日常工作中遇到的坑,结合黑泽君相关博客,选取.补充了部分内容. 开启 map 输出阶段压缩可以减少 job 中 map 和 Reduce task 间数据传输量. ...
day 51 阿里iconfont的使用
阿里iconfont的使用 1. 找到阿里巴巴图标库 2.找到图标 3.搜索你想要的图标 4.将图标添加到购物车 5.点击右上角的购物车按钮,我这里添加了两个. 6.提示你登陆,不需要花钱,找其中 ...
java读写属性配置文件
package readproperties; import java.io.FileInputStream; import java.io.IOException; import java.io.I ...
获取调用U9接口时报错的方法
c# 多态实现_虚方法
实现方法: 虚方法, 抽象类, 接口 1.虚方法将父类的方法标记为虚方法,使用关键字virtual,这个方法可以被子类重新写一遍. 在父类的方法前面加上一个virtual,在子类的方法前面加上一个o ...
mac os Catalina beta Jetbrains idea闪退解决方案
第一时间升级最新版本的Catalina 10.15 Beta 版(19A501i) 后, 发现不管在idea 输入什么,都会直接crash. 不论是卸载重装还是,clean,结果都是一样的. 在网上查 ...

webapp中<meta>与css代码部署

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

随机推荐

热门专题