在微信中浏览电脑版网页通栏大图没有居中的解决办法
2014-03-18 15:42
387 查看
前言:
随着微信的快速发展,微信营销也已经相当火热。即使没有移动商城,也可以让用户直接通过微信自带的浏览器访问电脑端页面。
![](http://images.cnitblog.com/i/546882/201403/181537519744561.png)
(图1.电脑端页面)
但是以前一直使用的通栏大图的居中显示在微信中却没有了居中效果,整个页面也不会根据屏幕大小自动调整。
![](http://images.cnitblog.com/i/546882/201403/181538513969573.png)
(图2. 微信页面)
异常分析:
貌似微信自带的精简版的QQ浏览器对CSS3的支持并不是很友好,如果想让电脑端页面在微信中正常显示,就需要对通栏大图采用其他布局方式了。
解决方法:
代码一. 原来使用的通栏样式的代码,代码使用详见:/article/6325237.html
代码二. 修改后的通栏样式的代码:
代码中的参数可以根据需要进行调整修改。
调整后的页面电脑端显示不变,微信端显示如下:
![](http://images.cnitblog.com/i/546882/201403/181539448967362.png)
可见,使用代码二中的布局方法实现通栏图片的方法,即可以使通栏图片正常居中显示,也能使整个页面根据屏幕进行调整。
随着微信的快速发展,微信营销也已经相当火热。即使没有移动商城,也可以让用户直接通过微信自带的浏览器访问电脑端页面。
![](http://images.cnitblog.com/i/546882/201403/181537519744561.png)
(图1.电脑端页面)
但是以前一直使用的通栏大图的居中显示在微信中却没有了居中效果,整个页面也不会根据屏幕大小自动调整。
![](http://images.cnitblog.com/i/546882/201403/181538513969573.png)
(图2. 微信页面)
异常分析:
貌似微信自带的精简版的QQ浏览器对CSS3的支持并不是很友好,如果想让电脑端页面在微信中正常显示,就需要对通栏大图采用其他布局方式了。
解决方法:
代码一. 原来使用的通栏样式的代码,代码使用详见:/article/6325237.html
<div style="margin-left:-960px;width:1920px;left:50%; position:relative;"> <a href="http://www.cnblogs.com/xyyt" target="_blank"> <img src="img01.jpg" height="600" /> </a> </div>
代码二. 修改后的通栏样式的代码:
<div style=" width:100%;left:50%; background: url(img.jpg) center 0 no-repeat;"> <a style="height: 80px;width: 100%;display: table;" href="http://www.cnblogs.com/xyyt" target="_blank"></a> </div>
代码中的参数可以根据需要进行调整修改。
调整后的页面电脑端显示不变,微信端显示如下:
![](http://images.cnitblog.com/i/546882/201403/181539448967362.png)
可见,使用代码二中的布局方法实现通栏图片的方法,即可以使通栏图片正常居中显示,也能使整个页面根据屏幕进行调整。
相关文章推荐
- 微信OAuth验证 java 版本
- telnet控制路由器交换机与微信公众平台
- 关于微信自定义菜单中用到的curl_init的说明
- php微信自定义菜单开发
- django开发微信简单消息交互
- 2013 CocoaChina微信精选之技术汇
- 微信API和SDK的调查
- 云来:论微信红包的产品营销思维
- 微信,想要说爱你,却没有那么容易!
- 再小的个体,也有自己的品牌-微营销学习笔记5:微信和微信公众平台
- 微信开发之连接数据库
- 时代神器-微营销学习笔记4:微信功能简介
- Dictionary运用之通讯录小程序
- 自制公众平台Web Api(微信)
- monkeyrunner的使用和自动测试微信
- 每天一个小程序(2)——带头结点的链表的创建以及插入和删除
- 微信公众账号能做什么怎么用,有哪些API供开发总结
- 微信公众平台开发之在线相册
- 微信分享 不闪窗 设置方法
- 如何让IIS7支持伪静态,让微信管家跑起来