lib-flexible 结合 WKWebView 的样式错乱解决方法

最新推荐文章于 2022-04-19 11:28:15 发布

转载最新推荐文章于 2022-04-19 11:28:15 发布 · 310 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/liaoyu/p/lib-flexible-wkwebview-viewport-bug.html

本文介绍了一个在使用lib-flexible进行移动端页面伸缩时遇到的问题，该问题出现在使用WKWebView的iOS客户端中。文章提供了具体的解决方法，即通过修改viewport元标签来修复页面布局错乱的情况。

技术栈

lib-flexible 是淘宝的可伸缩方案
WKWebView 是ios8以上支持的网页控件

问题场景

最新公司一个项目使用 lib-flexible 来做移动端的伸缩解决方案，页面在safari上都是正常的，在使用了 WKWebView 的客户端里却是错乱的
经过尝试，解决方法如下：

<meta content="maximum-dpr=2" name="flexible" />

替换为：

<meta name="viewport" content="initial-scale=1.0,maximum-scale=1,user-scalable=no">

吐槽下通过改 viewport 来适配到处都是坑~

转载于:https://www.cnblogs.com/liaoyu/p/lib-flexible-wkwebview-viewport-bug.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30896763

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

IOS WKWebView加载本地H5以及css，js等样式

学习一定要有针对性的练习-实操！

05-10

1595

两点非常坑爹的地方：第一点，就是导入前端给你的h5包的时候导入h5的包这里如果选择第一个，会无法加载js和css样式以及img，因为大部分前端这些东西都是写的绝对路径。如果你要选第一个groups，那么你就要去修改h5里面的路径，非常的繁琐，而且前端维护也很难受。这里选择第二个。导入Create folder references。你会发现是个蓝色的文件夹。然后，不要急着去用你的[NSBundle mainBundle]查找路径，因为这里有个坑。你需要去添加这里加入...

WKWebView 加载样式错乱

u012942234的专栏

01-02

3143

千万不要设置最小字体大小！！！！！http://m.alpha.woxiaoyun.com/data/marketing/effect.htm?APP_SID=yZIvLybysazjIEQg1zpxpXlVbRkXhnuFg

参与评论您还未登录，请先登录后发表或查看评论

vue webApp使用lib-flexible和px2rem引用第三方ui库后，样式错乱问题

一个来自外太空的游客

10-10

776

首先，需要卸载项目中的postcss-px2rem。 npm uninstall postcss-px2rem --save-dev 其次，安装postcss-px2rem-exclude npm install postcss-px2rem-exclude --save 然后在postcss.js下配置 “postcss-px2rem-exclude”: { remUnit: 75, exc...

webview设置导致app内嵌网页布局乱掉的其中一种问题解决

weixin_34319374的博客

05-21

3012

对app内嵌网页接触不多，这里描述的是一种内嵌网页布局乱掉的可能原因：关键字：“webview控件”、“setUseWideViewPort属性”、“meta标签” 参考文章： Android开发填坑之setUseWideViewPort 情景近期接到一个bug反馈，说一份网页代码放在一个第三方提供的app内显示布局乱掉了，但是这份代码在手机端浏览器是可以正常显示的；简单的处理过程 ...

WKWebView加载txt文档乱码

FlyingFireFish的博客

04-19

1945

swift中webView加载txt乱码处理

iOS - WKWebView那些坑

weixin_30412167的博客

07-24

165

WKWebView 是苹果在 WWDC 2014 上推出的新一代 webView 组件，用以替代 UIKit 中笨重难用、内存泄漏的 UIWebView。WKWebView拥有60fps滚动刷新率、和 safari 相同的 JavaScript 引擎等优势。简单的适配方法本文不再赘述，主要来说说适配 WKWebView 过程中填过的坑以及善待解决的技术难题。 1、WK...

vue项目中使用lib-flexible解决移动端适配的问题解决

12-09

在本文中，我们将深入探讨如何利用`lib-flexible`库来解决这个问题。 `lib-flexible`是一个专门为移动端适配设计的JavaScript库，它基于“Flexible Box”（也称为Flexbox）布局模型，帮助开发者快速实现响应式布局...

lib-flexible-2.0.zip

04-21

lib-flexible 2.0 是一套专门针对移动端适配的解决方案，它为开发者提供了简洁、高效的方法来处理这一难题。 lib-flexible 2.0 的核心思想是基于“设备像素比”（Device Pixel Ratio, DPR）和“响应式设计”理念，...

精选资源

Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法

01-19

淘宝弹性布局lib-flexible lib-flexible并不单独使用，而是搭配px2rem-loader一起做适配方案，目的是自动将css中的px转换成rem，在项目中还是按照设计稿写上对应的固定像素（px）就行。移动端适配的具体步骤第一步...

基于vue-cli配置lib-flexible + rem实现移动端自适应

08-28

Lib-Flexible是一个非常流行的移动端自适应解决方案，通过使用Rem单位来实现响应式设计。下面将详细介绍如何基于Vue-CLI配置Lib-Flexible + Rem实现移动端自适应。一、安装Lib-Flexible 首先，需要在项目中安装...

iOs迁至WKWebView跨过的一些坑

08-25

主要给大家介绍了关于iOs迁至WKWebView跨过的一些坑，文中通过示例代码介绍的非常详细，对各位iOS开发者们具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧

iOS webView展示部分docx出现乱码解决方案

xinkongqiSHF的博客

02-05

3396

项目中遇到预览docx和pdf要求：在开发过程中webView支持预览pdf和docx，so直接使用webView，但在后期测试阶段发现部分docx预览时为乱码现象，查找方案发现编码utf-8以及GBK等都无法解决乱码问题。后发现如下方案能做修改： content-type 用于定义用户的浏览器或相关设备如何显示将要加载的数据，或者如何处理将要加载的数据，

移动端使用lib-flexible与px2rem-loader导致第三方UI库样式崩坏

weixin_33858336的博客

04-25

1666

处理方案卸载px2rem-loader npm uninstall px2rem-loader --save-dev 复制代码删除build/utils.js文件以下代码安装postcss-px2rem-exclude npm install postcss-px2rem-exclude --save-dev 复制代码打开项目根目录下.postcssrc.js文件，添加以下代码 ...

【腾讯Bugly干货分享】WKWebView 那些坑

最新发布

06-04

### lib-flexible 安装指南 lib-flexible 是阿里巴巴推出的一个用于移动端适配的库，主要用于解决不同屏幕尺寸下的布局问题。以下是 lib-flexible 的安装方法及相关配置。 #### 1. 使用 npm 或 yarn 安装可以通过 npm 或 yarn 来安装 lib-flexible 库。运行以下命令以完成安装： ```bash npm install lib-flexible --save ``` 或者使用 yarn： ```bash yarn add lib-flexible ``` #### 2. 在项目中引入 lib-flexible 安装完成后，需要在项目的入口文件中引入 lib-flexible。根据项目结构的不同，可以选择以下方式之一： - 如果是基于 TypeScript 或 JavaScript 的项目，并且使用了 Webpack 或 Vite 等构建工具，可以在 `src/app.ts` 或 `src/app.js` 中引入： ```javascript // src/app.ts 或 src/app.js import 'lib-flexible'; ``` [^1] - 如果项目中有布局组件（如 Next.js 或 React 的布局文件），也可以在布局文件中引入，例如： ```javascript // src/layouts/index.tsx import 'lib-flexible'; export default function Layout({ children }) { return <>{children}</>; } ``` [^1] #### 3. 配置 HTML 模板为了确保 lib-flexible 正常工作，HTML 文件需要正确配置 viewport 标签。通常在 `public/index.html` 或类似的模板文件中添加以下内容： ```html <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> ``` [^1] #### 4. 注意事项尽管 lib-flexible 曾经是一个非常流行的移动端适配方案，但随着浏览器对 viewport 单位的支持越来越好，lib-flexible 已逐渐被更现代的解决方案所取代。因此，在选择适配方案时，可以考虑直接使用 viewport 单位（如 `vw` 和 `vh`）来替代 lib-flexible[^2]。此外，如果项目中使用了 PostCSS 和 px2rem 插件，也可以结合 lib-flexible 进行更精细的适配。例如，配置 PostCSS 时可以加入以下 loader： ```javascript const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]; ``` [^3] ### 总结 lib-flexible 的安装和配置相对简单，但在实际开发中需要根据项目需求选择合适的适配方案。对于新项目，建议优先考虑使用 viewport 单位或其他现代适配方案。