border宽度一致但在安卓与ios上显示粗细不一致问题

最新推荐文章于 2024-03-04 18:08:42 发布
最新推荐文章于 2024-03-04 18:08:42 发布
阅读量1.4k 收藏
点赞数
分类专栏： 开发之坑 文章标签： web app css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45229447/article/details/109392435
版权

border宽度一致但在安卓与ios上显示粗细不一致问题

使用H5开发app时常遇到各种兼容问题，特别是各种1px细线与边框问题
本次主要是遇到的边框问题 在安卓上设置边框border时显示没有问题，但是当运行在phone-xr或者phone-xs上时会出现明明border都是1px，`但是左边框更粗，或者更细，反正就是同一个宽度却显示粗细不一致的问题（如下图）

解决方法：设置border-radius:1px，边框就不会出现粗细不一致问题（不确定，但我解决了，具体原理不知）

在这里插入图片描述

希望能帮到各位

放手吧，别卷了
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
1px问题在ios与android,border宽度一致但在安卓与ios上显示粗细不一致问题
weixin_36080474的博客
05-28 492
SQL小技巧：一张表中存在两行完全一致的数据，如何删除？SQL小技巧：一张表中存在两行完全一致的数据，如何删除？ 作者：网云技术 来源：toutiao.com/i6699660655953183243 朋友们，我们在使用数据库的过程中，偶尔会犯一些低级错误。比如我们创建的某一张表，插入了两条一模一样的数据，想要删除其中一条怎么办？可靠消息最终一致性【本地消息表、RocketMQ 事务消息方案】可靠...
前端 地图增加边框线_地图省份边框设置borderWidth之后粗细不一致的问题...
weixin_35479284的博客
01-17 660
当我地图放大时需要对某个省份的border进行加粗,但是设置borderWidth之后发现某些省份的边界线粗细不一致,比如广东...用官网的例子也是这样..var placeList = [{name:'海门', geoCoord:[121.15, 31.89]},{name:'鄂尔多斯', geoCoord:[109.781327, 39.608266]},{name:'招远', geoCoor...
1px问题在ios与android,移动端1px问题的解决办法
weixin_32795109的博客
05-28 823
原因由于不同的手机有不同的像素密度导致的。如果移动显示屏的分辨率始终是普通屏幕的2倍，1px的边框在devicePixelRatio=2的移动显示屏下会显示成2px，所以在高清瓶下看着1px总是感觉变胖了解决方法一．在ios8+中当devicePixelRatio=2的时候使用0.5pxp{border:1px solid #000;}@media (-webkit-min-device-pixe...
解决CSS移动端1px边框问题
weixin_34244102的博客
12-25 221
移动项目开发中，安卓或者IOS等高分辨率屏幕会把1px的border渲染成2px来显示，网上搜了一下，解决方法如下： 一、利用css中的transform的缩放属性解决，推荐这个。如下面代码。   <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit...
移动端1px问题，使用vant配合rem后需要处理成1.5px或者2，3，等等，不然ios上显示不出来1px的边框
最新发布
qq_21138747的博客
03-04 448
table的td样式，需要设置成1.5px，手机上才会显示出边框，不然不显示边框。
原生 table 浏览器 border 粗细不一致（谷歌90版本以后） table兼容问题
weixin_46880303的博客
09-02 2708
.formTable{ border-spacing: 1px; background-color: rgba(201,201,201,1); /*边线颜色*/ border-collapse: separate; } td ,tr{ background-color: #fff; } 谷歌更新到90版本后，border-collapse:collapse ; 属性出现问题 导致，border 出现宽度不一 ![在这里插入图片描述](https://img-blog.csdni
安卓中border-radius圆角展示不圆问题
zeroyulong的博客
12-17 4729
问题： 移动端写小圆圈在安卓中显示不圆，为了做适配，移动端通常采用rem作为单位，原因是rem换算成px是一个带小数点的值，安卓对小于1px的展示做了处理，从而导致圆角不圆，在ios下就没有这个问题。 解决方案： 使用svg, 既可以适配，即使再小的圆形也能在不同屏幕上完美展示 <!DOCTYPE html> <html> <head> <...
关于移动端安卓和ios样式不统一
weixin_44969235的博客
07-17 594
移动端安卓和ios 样式兼容
layer.borderWidth 边框粗细问题
热门推荐
王梦琦的专栏
05-09 1万+
最近做一瀑布流项目，产品要求边框线是1像素，为了适配6和6plus，1除以3是除不尽的，如果设置borderWidth为0.3，有的机型显示不出来，所以设置borderWidth为0.5.但这出现另外一种情况，四周的边框线粗细不一致，这个问题折磨了我很久，最终找到了解决办法 CGFloat scale = [[UIScreen mainScreen] scale]; CGFloat widt
td/td标签的border 样式在浏览器中显示不出来的解决方法
12-13
总的来说，解决`<td>`标签的`border`样式在浏览器中显示不出来的问题，主要在于让浏览器认为`<td>`不是空的。通过添加不可见字符、设置最小尺寸或使用CSS伪元素等方法，我们可以有效地避免此类问题，保证页面在各种...
DIV border边框显示不完全问题的解决方法
10-30
总之，解决`div`边框显示不完全的问题需要从多个角度考虑，包括浏览器兼容性、布局方式、盒模型、CSS属性以及层叠上下文等。在实践中，通过不断调试和测试，结合使用浏览器开发者工具，通常能找到问题的根源并修复它...
iOS下border-image不起作用的解决办法
08-30
在iOS设备上，有时开发者会遇到`border-image`样式不生效的问题，这通常是由于浏览器的兼容性或特定的渲染机制导致的。`border-image`是一个非常有用CSS3属性，允许我们使用图像来创建复杂的边框效果，而不仅仅是...
使用js解决由border属性引起的div宽度问题
10-26
然而，`border` 属性在计算元素的实际宽度时，可能会引发一些问题，特别是在试图动态调整 `div` 宽度时。在标题提到的问题中，我们遇到了一个使用 JavaScript 解决 `border` 引起的 `div` 宽度问题的实例。 首先，...
CSS – border属性应用：如何简便制作相同粗细、线条类型但不同颜色的边框案例
01-07
但border的简写属性是同时应用于四条边框的，当我们想要制作相同粗细、线条类型但不同颜色的边框时，常用的简写方式无法满足我们的需求；   我们知道，简写属性同时运用于四条边框，而我们只是想得到不同颜色的...
为什么火狐浏览器border设置为1，显示是0.8？
m0_66220119的博客
02-11 1142
当时发现这个问题我是非常懵的，一度怀疑是不是自己哪里没写好。花了大把时间看了N遍后，曾一度想砸电脑 当时我电脑给我的感觉是这样的： 于是乎，在鼠标快要被我戳烂之际终于可算是在网上找到了答案。 火狐某次更新后的盒子边框宽度显示为输入样式的0.8倍.久经查看没有结果,然后我想到了我笔记本的高分屏… win10更新之后默认会有个缩放功能,如图,默认刚好是125% 在这里插入图片描述 如果网上的其他方法不管用,可以试试这个.通过火狐浏览器的兼容性设置,替换高dpi选项,选择...
React Native之虚线dashed属性在Android机不兼容问题解决
spicyboiledfish的博客
03-20 8877
borderStyle:"dashed" 在安卓机上无效果。iOS中可以正常显示虚线；但是安卓只能显示为实线。我的解决办法：lineOne:{ width:25, height:0, borderWidth:0.8, borderColor:'red', borderStyle:'dashed', borderRadius:0.1, }解决点：1. height...
【iOS】自己画描边圆角，自己出坑爹问题(2019.7.8更新)
CROW的博客
03-26 1451
这是一个产品由来以久的问题，结果伴随着新版本的测试上线，设计表示实在忍无可忍（明显欺负我新来的嘛），只好花时间去看看这个问题怎么回事。 圆角描边问题 首先说明设计的规范： 1.圆角长宽都为矩形高度一半 2.圆角描边宽度borderWidth为1单位 3.被点击时表框也需要变化 由于第三点，因此不能使用系统默认样式，这是业务前提。 我们可以先看看系统默认样式下的表现，描边宽度为1单位（...
微信小程序 0.5px的border在ios上显示粗细不均匀的解决方法
花花世界的博客
04-12 951
不再是直接style里面添加0.5px的border，而是内部添加一个view，把border通过伪元素绘制出来，宽高是200%、边框是1px，通过缩放0.5倍，绘制出和父视图一样的粗细的border，在ios上也能保证粗细一致。方便给border定位。
表格里面出现个别边框线粗细不同的解决
qq_49074952的博客
07-05 1699
浏览器缩放导致表格边框线变粗解决
如何解决border为1rpx在ios部分机型上会出现某一边的border不显示
07-08
在某些 iOS 设备上，使用 1rpx 边框时可能会出现某一边的边框不显示的问题。这是因为 iOS 设备的屏幕像素密度比（device pixel ratio）不同于 CSS 像素密度比（CSS pixel ratio），导致使用 1rpx 边框时无法准确渲染...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值