关于微信公众号内嵌网页的几个meta标签
最近在做微信公众平台内嵌app,其实也就是web app="=,不过就是基于微信内置浏览器(safari加了一个WeixinJS对象),稍微记一下几个html的meta标签(web app通用)
这是我用自己的公众号做的一个test页面(主要用于观察下微信后台编辑器生成的页面布局)
http://mp.weixin.qq.com/s?__biz=MzA4MjMwNDQzOQ==&mid=200473874&idx=1&sn=7541441abe50a22f7d5545adc69eae66&key=e60cf81314c277c7924c692b2c5f64482bcf5943e5f8b7ff4505ec0db12b3dc4a97e75414d80514730f8cb2d2df5f69d&ascene=1&uin=ODI2ODQ5MzYw
微信的页面meta有:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
下面来一个个meta解释下:
1: <meta http-equiv="X-UA-Compatible" content="IE=edge">
X-UA-Compatible 是针对 IE8 版本的一个特殊文件头标记,用于为 IE8 指定不同的页面渲染模式。这里有篇博客详解
http://bijian1013.iteye.com/blog/1978191
2: <meta name="apple-mobile-web-app-capable" content="yes">
设置该web页是否能以全凭模式运行,默认情况下是在safari中全屏展示。在js中可以修改window.navigator.standalone变量来决定使用全屏效果。
3: <meta name="apple-mobile-web-app-status-bar-style" content="black">
设置web页的工具栏样式
4: <meta name="format-detection" content="telephone=no">
设置safari中展示网页时是否自动将数字识别为电话号码(点击可以拨号)。默认是yes,如果不需要则设置为no。
5: <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
设置web页在iPhone浏览器中展示的size。
手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最先引进了 viewport 这个 meta tag,让网页开发者来控制 viewport 的大小和缩放,其他手机浏览器也基本支持。
其中:
width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
height:和 width 相对应,指定高度。
initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
maximum-scale:允许用户缩放到的最大比例。
minimum-scale:允许用户缩放到的最小比例。
user-scalable:用户是否可以手动缩放。
这个是我的参考http://blog.wpjam.com/m/viewport-meta-tag/。ps:这个站点很不错的说
关于微信公众号内嵌网页的几个meta标签的更多相关文章
- 微信公众号开发之网页中及时获取当前用户Openid及注意事项
目录 (一)微信公众号开发之VS远程调试 (二)微信公众号开发之基础梳理 (三)微信公众号开发之自动消息回复和自定义菜单 (四)微信公众号开发之网页授权获取用户基本信息 (五)微信公众号开发之网页中及 ...
- 微信公众号内H5调用微信支付国内服务商模式
最近在折微信公众号内H5用JSAPI调用微信支付,境内服务商版支付,微信支付给出的官方文档以及SDK不够详细,导至我们走了一些弯路,把他分享出来,我这边主要是用PHP开发,所以未加说的话示例都是PHP ...
- ASP.NET MVC4 微信公众号开发之网页授权(一):搭建基础环境
首先你得注册并认证一个个人或企业的微信公众号===服务号从而确保获得以下接口权限: 然后打开公众号设置里的功能设置里找到业务域名和网页授权域名分别填上你的域名(注:已备案的域名),如下图所示: 到这里 ...
- ASP.NET MVC4 微信公众号开发之网页授权(二):通过公众号AppID(应用ID)和AppSecret(应用密钥)取得网页授权openid
ASP.NET MVC4 微信公众号开发之网页授权(一):搭建基础环境 通过了上一篇文章我们已经搭建好了基础开发大环境,现在打开开发环境这里我用的是 vs2013,通过如下方式: 拼接请求链接重定向到 ...
- [小程序开发] 微信小程序内嵌网页web-view开发教程
为了便于开发者灵活配置小程序,微信小程序开放了内嵌网页能力.这意味着小程序的内容不再局限于pages和large,我们可以借助内嵌网页丰富小程序的内容.下面附上详细的开发教程(含视频操作以及注意事项) ...
- 微信小程序内嵌网页能力开放 小程序支持内嵌网页文档说明
为了方便开发者灵活配置微信小程序,张小龙现在开放了小程序的内嵌网页功能,这是一个非常大的惊喜啊,以后意味着你只要开放一个手机端网站,就可以制作一个小程序了哦.操作方法1.开发者登录微信小程序后台,选择 ...
- JAVA微信支付——微信公众号内支付 代码
官方文档:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_1 微信PC二维码支付方式参考:https://www.cnblogs. ...
- 微信公众号内唤起h5支付详解
1.调用统一下单的接口URL地址:https://api.mch.weixin.qq.com/pay/unifiedorder 2.调用统一下单必传参数: appid:需要进行支付功能的公众号的app ...
- 14-网页,网站,微信公众号基础入门(网页版MQTT,小试牛刀)
https://www.cnblogs.com/yangfengwu/p/11192639.html 抱歉哈...最近由于做板子,,教程的进度落下了... 这些天总共做了还几块板子 首先对当前这个教程 ...
随机推荐
- jsp中解决乱码问题
解决中文乱码 a) 第一种: String name=new String(name.getBytes("ISO-8859-1"),"UTF-8"); b) 第 ...
- php之接口内curl请求其他接口
今天遇到一个需要写curl的需求,情况是这样的: 同一应用的A系统(购物系统),B系统(答题系统)相互独立,用户数据全部存在于A系统的数据库中, 现在处于B系统的某项操作中,需要在B系统中验证当前请求 ...
- Gif图片验证码类
新开发的安全验证码类,支持生成Gif图片验证码(带噪点,干扰线,网格,随机色背景,随机自定义字体,倾斜,Gif动画). 上图: 字体及字体文件的路径需要在类中$FontFilePath及$FontFi ...
- 迭代器模式在 Java 容器中的实现
迭代器接口是迭代器模式实现的精髓: public interface Iterator<E> { boolean hasNext(); E next(); ... } 假设某容器名为 Xx ...
- bzoj 4465 游戏中的学问
Written with StackEdit. Description 大家应该都见过很多人手拉手围着篝火跳舞的场景吧?一般情况下,大家手 拉手跳舞总是会围成一个大圈,每个人的左手拉着旁边朋友的右手, ...
- oracle alter table
oracle alter table ALTER TABLE (表名) ADD (列名 数据类型); ALTER TABLE (表名) MODIFY (列名 数据类型); ALTER TABLE (表 ...
- SCARA——OpenGL入门学习四(颜色)
OpenGL入门学习[四] 本次学习的是颜色的选择.终于要走出黑白的世界了~~ OpenGL支持两种颜色模式:一种是RGBA,一种是颜色索引模式. 无论哪种颜色模式,计算机都必须为每一个像素保存一些数 ...
- Anaconda 使用conda常用命令
1.首先在所在系统中安装Anaconda.可以打开命令行输入conda -V检验是否安装以及当前conda的版本. 2.conda常用的命令. 1)conda list 查看安装了哪些包. 2)con ...
- Oracle恢复drop误删除的表和建用户操作
一.表的恢复 对误删的表,只要没有使用PURGE永久删除选项,那么从flash back区恢复回来希望是挺大的.一般步骤有: 1.从flash back里查询被删除的表 select * from r ...
- python 无序模块,hashlib模块
无序模块什么是无序模块,将字符串转化为十六进制的字符串类型,主要运用在网络编程中.1,json模块 1,用于网络传输,跨语言,可用的类型有 int str 列表-->元祖会变为列表 字典--&g ...