sdvcrx's wiki

用户工具

站点工具

您的足迹:
frontend:mobile

差别

这里会显示出您选择的修订版和当前版本之间的差别。

到此差别页面的链接

两侧同时换到之前的修订记录前一修订版
后一修订版		前一修订版
frontend:mobile [2017/08/31 10:55] – Add zhihu reference link memoryfrontend:mobile [2023/12/03 10:24] (当前版本) – 外部编辑 127.0.0.1
行 100: 行 100:
 } }
 </code> </code>
 +
 ===== Safari border-radius ===== ===== Safari border-radius =====
  
行 143: 行 144:
  
 First, enable Android adb debug mode. Then open ''chrome:\/\/inspect'' and allow permission on mobile, finally inspect the browser. First, enable Android adb debug mode. Then open ''chrome:\/\/inspect'' and allow permission on mobile, finally inspect the browser.
 +
 +===== iPhone X 适配 =====
 +
 +在 iPhone X 系列全面屏手机会出现下图底部操作栏覆盖掉 Tabbar 的情况
 +
 +{{ :frontend:iphone-x-failed.png?400 }}
 +
 +适配步骤为：
 +
 +1. 在 ''viewport'' 添加 ''viewport-fit=cover''
 +
 +2. 给 Tabbar 添加 ''padding-bottom''
 +
 +<code css>
 +.tabbar {
 +  padding-bottom: constant(safe-area-inset-bottom);
 +  padding-bottom: env(safe-area-inset-bottom);
 +}
 +</code>
 +
 +3. 检查所有页面的元素，通过 ''@supports'' 特性检测给所有 fixed bottom 布局的元素添加额外的 ''padding-bottom'' / ''margin-bottom''
 +
 +<code css>
 +@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
 +  div {
 +    margin-bottom: constant(safe-area-inset-bottom);
 +    margin-bottom: env(safe-area-inset-bottom);
 +  }
 +}
 +</code>
 +
 +===== 微信点击漂移 =====
 +
 +**影响范围**：**iOS 微信端**
 +
 +复现条件：点击 input 输入东西后，弹出弹窗确认（fixed 布局），弹窗的按钮不好点或者出现点击漂移。
 +
 +讨论链接：[[http://html51.com/info-59028-1/|微信打开网页键盘弹起后页面上滑，导致弹框里的按钮响应区域错位]]
 +
 +**解决方案：**
 +
 +这是因为微信弹出输入法时顶开了整个页面，可以在最后一个 input blur 的时候强制页面滚动到页面顶部或者底部。
 +
 +<code javascript>
 +input.addEventListener('blur', function () {
 +  window.scrollTo(0, 0);
 +});
 +</code>
  
 ===== Reference ===== ===== Reference =====
frontend/mobile.1504148107.txt.gz · 最后更改: 2023/12/03 10:24 (外部编辑)