mobile web开发(1) html页面头部基本设置
2014-12-03 16:33
211 查看
<!DOCTYPE html> <html> <head lang="en"> <!--定义文档字符编码类型--> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <!--在mobile的浏览器中页面将以原始大小显示,不允许缩放 强制让文档与设备的宽度保持1:1; width - viewport的宽度 height - viewport的高度 initial-scale - 初始的缩放比例 minimum-scale - 允许用户缩放到的最小比例 maximum-scale - 允许用户缩放到的最大比例 user-scalable - 用户是否可以手动缩放(0为不缩放,也可用yes或者no) (注意:实际测试中发现,andiord有的机型自身系统浏览器不支持这一条规则,能够对页面进行放大,一旦放大响应的box也随之放大, 导致页面出现错乱问题,解决方法:定义页面的最小宽度 min-width,e.g: body{min-width: 300px;})--> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/> <!--在手机上默认值是(电话号码和邮件地址显示为拨号的超链接)yes,用no可以不显示为超链接--> <meta name="format-detection" content="telephone=no,email=no" /> <!--ios设备对meta定义的私有属性:(可以添加至主屏幕 就是变为离线app,也即是web app:从外观上脱离浏览器,但还是浏览器核心渲染出来的,可以看作是一个app应用程序在运行,类似快捷方式)--> <meta name="apple-mobile-web-app-capable" content="yes"> <!--网站开启对web app程序的支持 在web app应用下状态条(屏幕顶部条)的颜色; 默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)。 若值为“black-translucent”将会占据页面px位置,浮在页面上方(会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px)。--> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!--配合web app的icon 和 启动界面需要额外的两端代码进行设定 这个link就是设置web app的放置主屏幕上icon文件路径 该路径需要注意的就是放到将网站的文档根目录下但不是服务器的文档的根目录。 图片尺寸可以设定为57*57(px)或者Retina可以定为114*114(px),ipad尺寸为72*72(px)--> <link rel="apple-touch-icon-precomposed" href="iphone_milanoo.png" /> <!--这个link就是设置启动时候的界面,放置的路劲和上面类似 官方规定启动界面的尺寸必须为 320*640(px)--> <link rel="apple-touch-startup-image" href="milanoo_startup.png" /> <title></title> </head> <body> </body> </html>
View Code
相关文章推荐
- HTML自学历程二:关于页面文字及背景的基本设置
- html 页面 title keyworld 的 SEO优化的 基本设置格式
- 常用PHP函数系列五:设置页面HTML的头部缓存信息和时间
- 从0开始html前端页面开发_CSS设置图像圆角
- 从0开始html前端页面开发_CSS设置图像边框阴影
- Java Web开发4___HTML基本标签: 超链接标签之页面内部链接
- HTML页面头部标记知识(可以设置自动刷新和自动跳转等功能)
- 移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析html代码,更好地将移动web前端页面表现出来。本文整理一些常用的meta标签
- html(三)页面基本标签及文本段落的设置
- 【小旋风开发日记】异步拉取html源代码、网页编码自动识别、基本xpath的智能抽取引擎的优化
- Silverlight与HTML页面交互基本方法总结
- asp.net mvc 2 简简单单做开发 通用增删改基本操作通用页面
- iphone开发:构建软件的设置页面
- js设置html页面中title
- html超链接href设置技巧和动态创建页面元素技巧
- html 窗口页面设置
- 设置html页面不让浏览器缓存的方法
- myeclipse中jsp/html页面自动提示的设置
- VBSCRIPT实现HTML页面控件的键盘光标位置获取和设置功能
- 记录一些常用的开发技巧,设置时间,跳转页面