微信小程序1rpx border ios真机显示不全问题分析及解决方案
微信小程序在iphone6或6p真机上如果有一排有边框的标签时,可能会出现个别边框显示不全的问题,下面进行一步一步分析
1.页面内容如下
wxml内容:
<view class='title'>
您喜欢下面那个公司?
</view>
<view class='label-con'>
<view class='label'>中国移动</view>
<view class='label'>苏宁</view>
<view class='label'>阿里巴巴</view>
<view class='label'>华为</view>
</view>
wxss内容如下
.title{
width: 90%;
font-size: 30rpx;
color: #333;
margin: 30rpx auto;
}
.label-con{
width: 696rpx;
height: 60rpx;
font-size: 28rpx;
color: #01b5b5;
margin: 0 auto;
}
.label{
height: 60rpx;
line-height: 60rpx;
border: 1rpx solid #01b5b5;
float: left;
border-radius: 10rpx;
padding: 0 20rpx;
margin-right: 16rpx;
margin-bottom: 16rpx;
}
2.在iphone6p上显示效果如下图
3.经过测试得来一组数据
注意步骤1中加粗的文本.label-con类中width:696rpx,将标签的父容器宽度设置为下面的值都会出现这个692 693 696 697 700 701 704 705 708 709,
那么会发现个规律,如下表:
4.分析结果
当标签的父容器宽度(单位rpx)÷2的值为偶数或偶数.5的时候会出现该bug,那么我们可以推到出用200.5*2=401,302*2=604等等都会重现这个bug,
那么解决方案就来了:
1)第一种方式是设置标签父容器的宽度到无bug值,即(奇数或奇数.5)*2,例如281*2rpx,281.5*2rpx可以解决;
2)第二种方式是补充像素单位:
步骤1中wxml增加space的view后如下:
<view class='label-con'>
<view class='space'></view>
<view class='label'>中国移动</view>
<view class='label'>苏宁</view>
<view class='label'>阿里巴巴</view>
<view class='label'>华为</view>
</view>
步骤1中wxss中增加space类为:
.space{
width: 1rpx;
height: 100%;
float: left;
}
以上两种方式即可解决该问题
另外还有一种解决方案就是border用background-image替代,即用切一个1px的背景图当容器的边框
微信小程序1rpx border ios真机显示不全问题分析及解决方案相关推荐
- 微信小程序 1rpx border ios 真机显示不全
微信小程序 1rpx border ios 真机显示不全 问题描述 在微信小程序的原生页面,ios 真机上 1rpx border 会出现个别边显示不全的情况: 解决方案 这里先放上问题直通车:微信小 ...
- 微信小程序 —— 1rpx边框ios真机显示不完全
问题描述:微信小程序在ios真机上有1rpx边框时,可能出现边框显示不完全的情况. 网上某大佬测试结果:当标签的父元素宽度(单位rpx)÷2的值为偶数或者偶数.5的时候就会出现该bug. 如600÷2 ...
- 微信小程序发布后,真机调用接口失败:ERR_CERT_AUTHORITY_INVALID
前言 微信小程序基础库:2.12.0 现象 真机调试出现错误:ERR_CERT_AUTHORITY_INVALID,模拟器调试无错误. 小程序上线后,部分机型能够正常使用,另一部分机型不能正常使用. ...
- 解决:微信小程序只有调试或真机打开调试模式时可以访问网络,手机预览不能访问网络
在微信小程序管理后台加入服务器域名,稍等一会再次访问即可 欢迎大家指正
- 微信小程序文件下载预览 真机调试可以 但直接预览打不开 小程序文件下载 小程序文件预览
只要确保真机调试和调试状态下可以下载并预览文件即可,上线后即可预览成功 文件预览代码: 小程序预览的前提需要先调用下载接口,下方代码未处理下载和预览失败事件哟,此处我使用的是uniapp框架,如果使用 ...
- 微信小程序如何本地进行真机调试?
这次记录的是 真机调试是后台是本地服务器,显示未能连接到服务器 的问题. 比如图片下载到本地,视频下载到本地...等等 在小程序开发时我们为了方便而不去搭建域名,在本地直接localhost就可以使用 ...
- 微信小程序canvas绘制图片真机不显示问题
用canvas绘制图片的时候,模拟器上正常显示,真机上不显示 const ctx = wx.createCanvasContext('canvasImg'); var imgUrl = 'https: ...
- 微信小程序下拉刷新真机没效果_微信小程序 下拉刷新 上拉加载(示例代码)
1.下拉刷新 小程序页面集成了下拉功能,并提供了接口,我们只需要一些配置就可以拿到事件的回调. 1. 需要在 .json 文件中配置. 如果配置在app.json文件中,那么整个程序都可以下拉刷新.如 ...
- 微信小程序下拉刷新真机无法弹回
在下拉函数里加上这句wx.stopPullDownRefresh(); /*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {var t ...
最新文章
- 一种 Web 应用程序级别的 Cluster 实现技术
- mysql 自定义提示符
- Matlab符号运算 - 解微分方程
- 面试时如何介绍自己的项目经验
- 面试进阶之字符串常量池
- 抓取新浪的每日星座运势
- 文件在IDEA中已进行Git的Commit操作,使其从暂存区提交到本地仓库,但是未Push到远程仓库,此时进行Pull操作出现代码冲突
- 80% 的 Android 应用正使用加密流量!
- Halcon标定系列(3):我个人总结的“眼在手外“和“眼在手上”的心得笔记
- Android之利用NanoHttpd搭建服务器
- Java写入磁盘阵列_磁盘阵列方案
- 带图片指示器的进度条
- AndroidStudio自带的模拟器如何联网
- FineBI中tomcat服务器部署
- 网站设计公司有哪些?如何找到可靠的网站设计公司?
- Ubuntu 20.04使用deepin wine安装Windows官方版QQ、微信、Tim等
- 人工智能在游戏设计中的应用
- 美元指数升至七周高点 短期仍有上涨动能
- 计算机打印共享应该怎么设置,打印机共享设置,告诉你打印机共享怎么设置
- java微信红包_Java模拟微信发红包(普通红包、拼手气红包)
热门文章
- 用JAVA实现字符串大小写转换
- 极验滑动验证流程及思路
- Google(谷歌浏览器)安装React developer tools 工具方法
- [CVPR-20] Randaugment: Practical automated data augmentation with a reduced search space
- google地图 离线版 经纬度_好文推荐:奥维地图在测绘作业中应用的研究
- 微信小程序预览多张图片
- TDP照射类毕业论文文献有哪些?
- 简单的命令控制同一局域网内的电脑
- 模电multisim的1.6.1的例题实验演示
- 构建ARM嵌入式开发环境