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 ...
随机推荐
- input、textarea等输入框输入中文时，拼音在输入框内会触发input事件的问题
监听文本输入框的input事件,在拼写汉字(输入法)但汉字并未实际填充到文本框中(选词)时会触发input事件,如图: 但是在很多情况下,只需要输入到输入框的中文字符. 解决办法: 通过查阅资料得知在 ...
- SQL Server [join] 整理
[表A]Aid Aname Acode1 aa 0012 bb 0023 cc 0034 dd 004 ...
- linux环境变量设置错误后的恢复方法（转）
原文: http://blog.csdn.net/hoholook/article/details/2793447 linux环境变量设置错误后的恢复方法 中国自学编程网收集整理 发布日期:2008 ...
- final、static、package、import，和内部类、代码块总结
final: final是最终修饰符,可以修饰类.成员方法.变量 final修饰的类无法被继承 final修饰的方法无法被重写 final修饰的变量无法被再次赋值,变为了常量 final修饰的引用数据 ...
- C++返回引用的需求
1.重载+=操作符返回*this或者某个参数的引用可以方便链式调用,比如C++流操作就是cout<< a << b << c这样的,就是靠不停返回stream的引用 ...
- Vue项目在Docker的自动化部署
操作系统:CentOS 部署环境:Docker CI/CD工具:Jenkins 1.环境配置 安装Jenkins:Centos安装Jenkins 安装Docker:Centos安装Git.DotNet ...
- var、fucntion关键字优先级问题
情况1:使用var关键字定义的变量优先被声明 console.log(a); // undefined var a = 20; /* var a =20; (1)声明变量a -- 优先被执行, ...
- [转]async & await 的前世今生（Updated）
async 和 await 出现在C# 5.0之后,给并行编程带来了不少的方便,特别是当在MVC中的Action也变成async之后,有点开始什么都是async的味道了.但是这也给我们编程埋下了一些隐 ...
- JUC 一 CopyOnWriteArrayList 和 CopyOnWriteArraySet
java.util.concurrent; 简介 CopyOnWriteArrayList是一个线程安全的ArrayList,通过内部的volatile数组和显式锁ReentrantLock来实现线程 ...
- thinkphp Mongo模型
Mongo模型是专门为Mongo数据库驱动而支持的Model扩展,如果需要操作Mongo数据库的话,自定义的模型类必须继承Think\Model\MongoModel. Mongo模型为操作Mongo ...