微信公众平台页面小结

最近和两个同学在开发一个微信公众平台。我在写一些链接页面时,一开始简单地写了一些HTML页面,在手机上测试显示ok。后来,一个同学说了我写的页面怎么能够扩大,他给我随便演示的几个微信链接页面不能扩大,让我去改。于是我看了一部分他人的代码,发现在

最近和两个同学在开发一个微信公众平台。我在写一些链接页面时,一开始简单地写了一些HTML页面,在手机上测试显示ok。后来,一个同学说了我写的页面怎么能够扩大,他给我随便演示的几个微信链接页面不能扩大,让我去改。于是我看了一部分他人的代码,发现在他们的页面头部都有下面这么一部分代码。

<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=no" />
<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">
<link rel="stylesheet" type="text/css" href="http://res.wx.qq.com/mmbizwap/zh_CN/htmledition/style/client-page1baa9e.css"/>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="http://res.wx.qq.com/mmbizwap/zh_CN/htmledition/style/pc-page1b2f8d.css"/>
<![endif]-->
<link media="screen and (min-width:1000px)" rel="stylesheet" type="text/css" href="http://res.wx.qq.com/mmbizwap/zh_CN/htmledition/style/pc-page1b2f8d.css"/>
<style>
body{ -webkit-touch-callout: none; -webkit-text-size-adjust: none; }
</style>
<script type="text/javascript">
document.domain = "qq.com";
var _wxao = window._wxao || {};
_wxao.begin = (+new Date());
</script>

我没有深入研究过HTML的meta标签,我上网查了资料,才弄明白怎么回事。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

X-UA-Compatible是IE8专有的标记,是用来指定Internet Explorer 8浏览器模拟摸个特定版本IE浏览器的渲染方式,以此来解决IE浏览器的兼容问题。Edge 模式 通知Windows Internet Explorer已最高级别的可用模式显示内容。

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />

设置可视区域,传统桌面浏览器就是指除去所有工具栏、状态栏、滚动条等等之后用于看网页的区域,移动设备不一样,需要设置。
width //宽度
initial-scale //初始缩放比例
maximum-scale //允许用户缩放的最大比例
user-scalable //用户是否可以用手缩放

 

下面的设置是针对苹果设备的
<meta name="apple-mobile-web-app-capable" content="yes">
设置页面是否全屏显示,yes,web应用全屏显示
<meta name="apple-mobile-web-app-status-bar-style" content="black">
设置状态栏的颜色,content可取default、black、black-translucent,对应默认,黑色和黑色透明。默认和黑色,页面在工具栏下显示,黑色透明将全屏显示
<meta name="format-detection" content="telephone=no">
设置在页面中是否自动识别电话号码
body{ -webkit-touch-callout: none; -webkit-text-size-adjust: none; }
webkit-touch-callout:禁用长按弹出效果,none禁用,default使用弹出效果
webkit-text-size-adjust:调整页面文本大小,none不会自动调整,auto自动调整

 

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="http://res.wx.qq.com/mmbizwap/zh_CN/htmledition/style/pc-page1b2f8d.css"/>
IE 9 使用的样式
<![endif]-->
<link media="screen and (min-width:1000px)" rel="stylesheet" type="text/css" href="http://res.wx.qq.com/mmbizwap/zh_CN/htmledition/style/pc-page1b2f8d.css"/>
屏幕宽度大于1000px使用的样式

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

一、微信支付接口概念: 微信支付是由腾讯社交软件微信和财付通联合推出的移动支付产品,而微信支付接口则是为微信电商提供的手机支付服务功能接口,商户一旦申请此接口,客户就可以通过微信支付进行在线购物付款。其安全系统全部有具有第三方支付牌照的财付
有的朋友出现redirect_uri参数错误这种情况,怎么办?跟版网源码网告诉你解决方法 可能原因1:授权目录 支付授权目录是网站发起请求的页面所在目录,并且必须是能通过url地址访问的(与真实物理目录路径无关)。注意这个目录在注册填写时,需要精确到最细一级
3月17日,微信官方发布公告,将启动微信公众号自动注销机制,210天内不活跃的非认证号将被自动注销。 官方表示,将直接改善其占用用户以及平台的昵称和微信号等资源的情况,满足各位小伙伴对长时间不使用帐号注销的需要。 据了解,在收到站内通知之后的14天
经常有客户反馈说程序出问题了首页大变脸。再仔细观察下就会发现,其实是某个公众号的微官网。 这种现象并非程序bug,亦非网站被攻击,而是自己设置出了问题! 下面说一下解决办法: 1、根据访问首页后的地址确定问题公众号: 如果首页不正常,你会发现浏览
自媒体人总要发布自己的文章,哪些平台最适合自媒体人来发布自己的文章呢?这里介绍一下10自媒体发布平台的基本特点: 1.QQ空间 其实类似QQ空间的平台很多,各种博客,这里提它其实是大家都把空间作为最后引流的终端了,所以算一个。其实如果你要做一个自媒
摘要: 又当运动员,又当裁判员,才是公众对于这位社交软件巨头的最大担忧。 这个周末,相信很多人又重新认识了一遍朋友圈里的好友包括每个人的名字,以及性格。 差不多是在7月16日,一款性格测试产品甫一发布便爆红网络,一张张配文我是XXX的黑底图片在很多