添加到百度首页
添加收藏 RSS 网站地图 旧版网站
  • 全部
  • 网页特效
  • 建站教程
  • 设计分享
当前位置:首页 > 建站教程 > HTML5+CSS3 >

微信公众平台页面小结

时间:2014-12-26      来源:互联网     

最近和两个同学在开发一个微信公众平台。我在写一些链接页面时,一开始简单地写了一些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使用的样式

相关文章

大家都在看

最新更新