iOS

解决 H5 页面在手机上布局异常的问题

Posted by Miaocf on December 18, 2019

目前在做一款电商 APP,在商品详情页中,使用 webview 呈现 H5 内容来展现商品的图文详情。测试反馈说 H5 内容呈现样式发生异常,经研究是手机尺寸与PC尺寸存在差异,CSS 无法完全适配导致的。

如图,图片显示不完整 ⤋

把 URL string 放到PC上展示如下:⤋



不难看出,这个详情页是把图片分割成多个部分,然后通过 CSS 布局拼接到一起的。

拉伸 PC 浏览器窗口,可以看到我们想要的布局效果:⤋

// html 中,图片宽度为 750 px,
// 为了铺满屏幕,计算 initial-scale 初始缩放比例
// html 中的尺寸为 750, 手机使用的不是物理像素,而是点;
    
CGFloat w = [[UIScreen mainScreen] bounds].size.width;
CGFloat ratio = w/750.0;
1
2
3
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=0'>
<meta name='format-detection' content='telephone=no'>

因为商品详情页在 PC 上的宽度为750像素, 我们根据手机频幕的宽度,计算出 H5 页面的缩放比例。
根据 H5 页面 头部 meta 信息,设置 initial-scale初始缩放比例,通过注入 JS 调整初始缩放比例

加载页面之前,注入一段 JS 代码:

CGFloat w = [[UIScreen mainScreen] bounds].size.width;
CGFloat ratio = w/750.0;

NSString *jScript = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width,initial-scale=ratio,minimum-scale=0.30, maximum-scale=3.0, user-scalable=0'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);";

jScript = [jScript stringByReplacingOccurrencesOfString:@"ratio" withString:[NSString stringWithFormat:@"%f",ratio]];

WKUserScript *wkUScript = [[WKUserScript alloc] initWithSource:jScript injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
WKUserContentController *wkUController = [[WKUserContentController alloc] init];
[wkUController addUserScript:wkUScript];

WKWebViewConfiguration *wkWebConfig = [[WKWebViewConfiguration alloc] init];
wkWebConfig.userContentController = wkUController;

wkWebV = [[WKWebView alloc] initWithFrame:self.view.frame configuration:wkWebConfig];

这样,webview 跟据当前 屏幕大小,自适应缩放 H5页面的大小。

设置比例过小的效果图 ⤋

设置缩放比例正确的效果 ⤋


参考链接

关于转载

知识共享许可协议

本作品采用知识共享署名 4.0 国际许可协议 进行许可。 转载时请注明原文链接。图片在使用时请保留图片中的全部内容,可适当缩放并在引用处附上图片所在的文章链接。