前端样式兼容求助

2 天前
 chenzhe

不懂就问,现在写很多前端,图省事儿和习惯,都是用 vite CLI 或者 nextjs CLI 直接初始化项目,配合 tailwindcss 和基于 twcss 的 shadcn/ui(现在 twcss 都 4.0 了)直接写 UI 。

因为一直以来都是野路子写,没有去学过基础的 Babel 配置这些东西。

手头只有 iPhone ,所以每次自己这边测试都很正常,效果也挺好的,但是真的放在好多国产手机的自带浏览器上就会出现兼容问题。特别是稍老的低端安卓手机的自带浏览器上。

有没有大佬能解答下该如何配置可以解决这一问题,或者有相关方向的课程。

507 次点击
所在节点    前端开发
12 条回复
jackple
2 天前
可以看看 autoprefixer
https://v3.tailwindcss.com/docs/using-with-preprocessors
不过其实我不用 tailwindcss, 看着头疼
felbryiozzzz
2 天前
你说的这个问题没有银弹吧
最佳实践就是积累一套自己的布局标准习惯(比如 flex 一把梭,避免用 float 这些),尽可能少用一些很新很高级的特性
经常用到的一些高级 css 场景,总结一套兼容方案记录好就行
查兼容性可以用这个 https://caniuse.com/
Twinkle
2 天前
别说 v4 了,好多老机型 v3 都不行,可以考虑安装 postcss 插件来兼容一些样式:
https://www.npmjs.com/package/postcss-preset-env
wgbx
2 天前
PostCSS + Autoprefixer ,类似于 JS 的 Babel +Polyfill
iMiata
2 天前
回想起以前做全平台兼容适配的时候,日常就是从 https://caniuse.com/查兼容性和丢截图给测试

唯一的路子就是多查,MDN 现在也有类似 caniuse 的兼容表会放在下面
90e
2 天前
@felbryiozzzz 还真是,我现在写啥都是 flex ,手熟尔
Razio
2 天前
开发之前不看受众的吗,用户是老年机、或者内部系统,都要看场景再开发的吧。
crocoBaby
2 天前
不行的,没有万金油的方法,你要根据用户群体的范围去写
shaozelin030405
2 天前
找一些 polyfill ,nextjs 看看怎么配置使用 polyfill 。大不了问下 ai 呗(就这个思路就好了)
PPPaul
2 天前
@90e 确实,早些年学的时候还 margin auto ,现在全是 flex ,梭哈
chenzhe
2 天前
@jackple
@felbryiozzzz
@Twinkle
@wgbx
@iMiata
感谢各位的支招,我去翻翻资料研究下。
chenzhe
2 天前
@Razio 就是个普通网站,客户之前也没说具体的受众群,交付了之后三天两头反馈说终端客户打开页面只有文字,排版什么全是乱的。我开发过程中都是用 Chrome 自带的设备工具栏那边对着 iPhone 14 Pro Max 做开发,然后在我自己的 iPhone 17 Pro 的 Safari 以及 Chrome 上确认最终效果,然后手头还有一个华为的 Mate 60 再做一次效果确认,没问题就发了。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://ex.noerr.eu.org/t/1171233

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX