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 ...
随机推荐
- 单行文本截断 text-overflow
div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
- 十一. for of
const fruits = ['Apple','Banana','Orange','Mango']; es5: 可读性差 for(let i=0; i < fruits.length; i + ...
- 视频云肖长杰：视频AI科技助力短视频生态
人工智能技术是当今炙手可热的技术领域,它在制造.家居.零售.交通.安防等行业的应用已经是大势所趋.在本月云栖Techday音视频技术沙龙中,阿里云视频云产品专家肖长杰为我们分享了一些AI技术在视频中应 ...
- thinkphp present标签
present标签用于判断某个变量是否已经定义,用法: 大理石平台精度等级 <present name="name"> name已经赋值 </present> ...
- 微信小程序——单选项
对于小程序单选,官方文档已经贴出了代码,我这里也不做过多解释,只是分享给大家一个小功能 一般在单选或者多选时,都会出现“其他”这个选项,如果通过input焦点事件.失焦事件来控制,代码会很繁琐 这里可 ...
- iOS开发NSMutableArray数组越界处理
#import "NSArray+CrashArray.h" #import <objc/runtime.h> @implementation NSObject (Un ...
- iOS开发之SceneKit框架--SCNCamera.h
1.SCNCamera简介 被称为照相机或者摄像机,可以附加到节点以提供显示场景的角度.其实就是用户视角和人的眼睛一样. 2.相关API简介 初始化 //懒加载 + (instancetype)cam ...
- day 67 Django基础三之视图函数
Django基础三之视图函数 本节目录 一 Django的视图函数view 二 CBV和FBV 三 使用Mixin 四 给视图加装饰器 五 Request对象 六 Response对象 一 Dja ...
- 第十一篇：一点一滴学ibatis（一）
一.常见ORM框架1.原生的JDBC.自己写的JDBC,基本上就只够程序跑起来,缺陷和漏洞一堆堆.回顾下jdbc的几个操作,加载驱动,建立连接,预处理语句,执行,结果集遍历.这个过程中,因为连接Con ...
- 第十篇：javaScript中的JSON总结
参考网站:json中国,MDN json 一.必知基础 JSON 是JavaScript对象文字符号的一个子集,它可以自如的在JavaScript中使用.看下这个对象: var myJSONOb ...