jsp网站开发教学,温州易富信息技术有限公司,代码给wordpress添加图片,页游网站1.先说说mate标签里的viewport#xff1a; viewport即可视区域#xff0c;对于桌面浏览器而言#xff0c;viewport指的就是除去所有工具栏、状态栏、滚动条等等之后用于看网页的区域。对于传统WEB页面来说#xff0c;980的宽度在iphone上显示是很正常的#xff0c;也是满屏…1.先说说mate标签里的viewport viewport即可视区域对于桌面浏览器而言viewport指的就是除去所有工具栏、状态栏、滚动条等等之后用于看网页的区域。对于传统WEB页面来说980的宽度在iphone上显示是很正常的也是满屏的但对于webapp而言可能就有点问题了在iphone上我们的webapp在竖屏下通常宽度都是320。 因此我们必须改变viewport我们就有如下几种属性值可以设置 width: viewport 的宽度 范围从 200 到 10,000 默认为 980 像素 height: viewport 的高度 范围从 223 到 10,000 initial-scale: 初始的缩放比例 范围从0到 10 minimum-scale: 允许用户缩放到的最小比例 maximum-scale: 允许用户缩放到的最大比例 user-scalable: 用户是否可以手动缩放 对于这些属性我们可以设置其中的一个或者多个并不需要你同时都设置iPhone 会根据你设置的属性自动推算其他属性值 而非直接采用默认值。 如果你把initial-scale1 那么 width 和 height在竖屏时自动为320*356 不是320*480 因为地址栏等都占据空间 横屏时自动为 480*208。类似地 如果你仅仅设置了 width 就会自动推算出initial-scale 以及height。例如你设置了 width320 竖屏时 initial-scale 就是 1 横屏时则变成 1.5 了 那么到底这些设置如何让 Safari 知道 其实很简单 就一个 meta 形如 meta name”viewport” content”widthdevice-width; initial-scale1.0; maximum-scale1.0; user-scalable0;” / 设置了meat后我们页面将如此呈现了 2.meta标签里的name属性 name 属性(1)、meta nameGenerator contect用以说明生成工具如Microsoft FrontPage 4.0等(2)、meta namekeywords contect向搜索引擎说明你的网页的关键词(3)、meta nameDescription contect告诉搜索引擎你的站点的主要内容(4)、meta nameAuthor contect你的姓名告诉搜索引擎你的站点的制作的作者(5)、meta nameRobots contectall | none | index | noindex | follow | nofollow其中的属性说明如下设定为all文件将被检索且页面上的链接可以被查询设定为none文件将不被检索且页面上的链接不可以被查询设定为index文件将被检索设定为follow页面上的链接可以被查询设定为noindex文件将不被检索但页面上的链接可以被查询设定为nofollow文件将不被检索页面上的链接可以被查询 3.webapp里主要的mate用途 meta nameapple-touch-fullscreen contentyes 添加到主屏幕后全屏显示。 meta nameapple-mobile-web-app-capable contentyes / 这meta的作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时这个行meta就不用加了默认就是显示。 meta name”apple-mobile-web-app-status-bar-style” contentblack” / 默认值为default白色可以定为black黑色和black-translucent灰色半透明。注意 若值为“black-translucent”将会占据页面px位置浮在页面上方会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px。meta nameapple-mobile-web-app-capable contentyesmeta nameapple-mobile-web-app-status-bar-style contentblack-translucent 在iOS中有两个meta值apple-mobile-web-app-capable和apple-mobile-web-app-status-bar-style这两个会让网页内容以应用程序风格显示并使状态栏透明。 link relapple-touch-icon-precomposed hrefhttp://spion.blog.163.com/blog/iphone_milanoo.png /说明 这个link就是设置web app的放置主屏幕上icon文件路径。图片尺寸可以设定为57*57px或者Retina可以定为114*114pxipad尺寸为72*72pxmeta contenttelephoneno nameformat-detection /meta contentemailno nameformat-detection / //将不识别邮箱告诉设备忽略将页面中的数字识别为电话号码 link relapple-touch-icon href/static/images/identity/HTML5_Badge_64.png /link relapple-touch-icon-precomposed href/static/images/identity/HTML5_Badge_64.png / iOS用relapple-touch-icon,android 用relapple-touch-icon-precomposed。这样就能在用户把网页存为书签时在手机HOME界面创建应用程序样式的图标。 meta namesharecontent data-msg-img缩略图地址 data-msg-title标题 data-msg-content简介 data-msg-callBack data-line-img缩略图地址 data-line-title标题 data-line-callBack/ 微信分享页面设置转载于:https://www.cnblogs.com/jxh-it/p/4009553.html
