如何重建网站,广州市服务好的网站制作排名,项目建设管理费,福州网站设计网站系统制作下面介绍一些有关标记的例子及解释。 一、meta 标签分两大部分#xff1a;HTTP 标题信息#xff08;http-equiv#xff09;和页面描述信息#xff08;name#xff09;。 1、http-equiv 属性的 Content-Type 值#xff08;显示字符集的设定#xff09; 说明#xff1a;设… 下面介绍一些有关标记的例子及解释。 一、meta 标签分两大部分HTTP 标题信息http-equiv和页面描述信息name。 1、http-equiv 属性的 Content-Type 值显示字符集的设定 说明设定页面使用的字符集用以说明主页制作所使用的文字语言浏览器会根据此来调用相应的字符集显示 page 内容。 用法 1 /CODEmeta http-equivContent-Type contenttext/html; charsetutf-8 / 注意该 meta 标签定义了 HTML 页面所使用的字符集为 utf-8 就是万国码。它可以在同一页面显示中文简体、繁体及其它语言如日文韩文等。 2、name 属性的 viewport 值移动屏幕的缩放 也就是可视区域。对于桌面浏览器我们都很清楚 viewport 是什么就是除去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域这是真正有效的区域。由于移动设备屏幕宽度不同于传统 web因此我们需要改变 viewport 值。 实际上我们可以操作的属性有 4 个 width – // viewport 的宽度 范围从 200 到 10,000默认为 980 像素 height – // viewport 的高度 范围从 223 到 10,000 initial-scale – // 初始的缩放比例 范围从 0 到 10 minimum-scale – // 允许用户缩放到的最小比例 maximum-scale – // 允许用户缩放到的最大比例 user-scalable – // 用户是否可以手动缩放 (noyes) 1 /CODEmeta nameviewport contentwidthdevice-width, initial-scale1.0, maximum-scale1.0, user-scalableno / 说明 强制让文档与设备的宽度保持 1:1 文档最大的宽度比列是1.0 initial-scale 初始刻度值和 maximum-scale 最大刻度值user-scalable 定义用户是否可以手动缩放 no 为不缩放使页面固定设备上面的大小注意实际测试中发现有些安卓系统自带的浏览器并不支持这一条规则能够对页面进行放大一旦放大响应的 box 也随之放大导致页面出现错乱问题解决方法定义页面的最小宽度 1 2 3 body { min-width: 320px; } 3、name 属性的 format-detection 值忽略页面中的数字识别为电话号码 1 /CODEmeta nameformat-detection contenttelephoneno / 说明 使设备浏览网页时对数字不启用电话功能不同设备解释不同iTouch 点击数字为存入联系人iPhone 为拨打电话忽略将页面中的数字识别为电话号码。若需要启用电话功能将 telephoneyes 即可若在页面上面有 Google Maps, iTunes 和 YouTube 的链接会在ios设备上打开相应的程序组件。4、name 属性的 apple-mobile-web-app-capable 值网站开启对 web app 程序的支持 1 /CODEmeta nameapple-mobile-web-app-capable contentyes / 说明 网站开启对 web app 程序的支持。该 meta 可以看出内容为“苹果设备 web 应用程序 xx”就是说该 meta 是专门定义 web 应用的。5、name 属性的 apple-mobile-web-app-status-bar-style 值改变顶部状态条的颜色 1 /CODEmeta nameapple-mobile-web-app-status-bar-style contentblack / 说明 在 web app 应用下状态条屏幕顶部条的颜色默认值为 default白色可以定为 black黑色和 black-translucent灰色半透明注意若值为“black-translucent”将会占据页面位置浮在页面上方会覆盖页面 20px 高度 iphone4 和 itouch4 的 Retina 屏幕为 40px 。 6、name 属性设置作者姓名及联系方式 1 /CODEmeta nameauthor contectliudanyun, liudy102163.com / 二、苹果 Web App 其他设置 当然配合 Web App 的 icon 和启动界面需要额外的两端代码进行设定如下所示 1 /CODElink relapple-touch-icon-precomposed hrefiphone_logo.png / 说明这个 link 就是设置 Web App 的放置主屏幕上 icon 文件路径图片四。 使用 该路径需要注意的就是放到将网站的文档根目录下但不是服务器的文档的根目录。图片尺寸可以设定为 57*57px或者 Retina 可以定为 114*114pxiPad 尺寸为 72*72px 1 /CODElink relapple-touch-startup-image hreflogo_startup.png / 说明这个 link 就是设置启动时候的界面。 使用 放置的路径和上面一样。官方规定启动界面的尺寸必须为 320*640px原本以为 Retina 屏幕可以支持双倍但是不支持图片显示不出来。 http://www.cssue.com/xhtml-css/html5-css3/mobile-meta.html 转载于:https://www.cnblogs.com/liuzhuqing/p/7480327.html
