第一次微信端网页开发项目遇到的坑

1、字符串编码问题。

   html文件上传到Linux服务器端后,中文显示为乱码。

   原因:用记事本写代码时,默认保存为ASCNLL,不是UTF-8,所以出现了中文乱码的问题。

2、移动端适配问题。

   将网页上传到移动端后,虽然用了百分比布局,但是移动端的屏幕尺寸大小千奇百怪,导致在不同屏幕下的样式失真。

   解决办法:

目前比较常用的方案:首先要让页面大小铺满屏幕又不能溢出。只需要在<head>标签内加入viewport(如下),参数分别表示:页面宽度= 屏幕宽度,最大和最小伸缩比都是1,不允许用户拉缩。

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

    然后把长度单位转换为百分比来表示,这样在不同的宽度下,元素的长宽也会随之变化。

最后用媒体查询的方法,确定在不同屏幕宽度下,改变<html><body>fontsize。再用rem, em替代 px作为单位实现自适应。

ps:rem做自适应时当html设置较大的fontsize时,块元素内的行内元素marginpadding会出现额外的值,解决办法是把外面包的块元素fontsize设置为0

3、微信网页开发的问题。

   网页在微信端显示时,有些页面可以正常显示样式,有些页面的样式会发生偏移。

   原因:如果微信版本是6.1以下,微信会调用系统自带的浏览器去加载渲染网页,所以对CSS3HTML5的支持,就根据终端的不同而不同了;如果微信版本是6.1以上,并且手机装有QQ浏览器,微信就会调用QQ浏览器的X5内核去加载渲染网页。

   解决方案:尽量少用h5css3等新标签来渲染效果。

4、弹出框垂直居中以及背景模糊化

    居中:position: absolute;
top:50%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);

   背景模糊化:filter: blur(5px);

猜你喜欢

转载自blog.csdn.net/hunjue0915/article/details/78069400