差别

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

--- frontend:mobile [2017/05/22 16:49] – Add webkit-appearance section memory
+++ frontend:mobile [2023/12/03 10:24] (当前版本) – 外部编辑 127.0.0.1
@@ 行 81: / 行 81: @@
 ===== Input Appearance =====
+**影响范围：** safari （当前版本为iOS 10）
 在 ''safari'' 上想要覆盖 ''input'' 组件的样式，记得加上 ''-webkit-appearance: none;'' ，否则会有safari的默认样式样式导致实际效果和设计图出入较大。
@@ 行 90: / 行 92: @@
 }
 </code>
+想要隐藏掉 ''textarea'' 右下角的角标，可用 ''resize'' 禁用掉调整大小的功能：
+<code css>
+textarea.textarea {
+  resize: none;
+}
+</code>
+===== Safari border-radius =====
+**影响范围：** safari （当前版本为iOS 10）
+如想设单边 ''border-radius''，在 ''safari'' 上可能会出现四个角都有 ''border-radius'' 的情况，所以最好声明另外一边的 ''border-radius'' 为0:
+<code css>
+.right {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  border-top-left-radius: 0;    /* required */
+  border-bottom-left-radius: 0;    /* required */
+}
+.left {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  border-top-left-radius: 0;    /* required */
+  border-bottom-left-radius: 0;    /* required */
+}
+</code>
+===== :empty selector =====
+**影响范围：** Android 4.0-4.2
+用 ''p:empty'' 选择器来隐藏掉部分空元素时把有内容的元素都隐藏了
+示例代码：
+<code html>
+<div class="content">
+  <p>First line<br />
+second line<br />
+third line</p>
+</div>
+</code>
+===== Debug on UC Browser =====
+Install UC developer version: http://plus.uc.cn/document/webapp/doc5.html
+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 }}
+适配步骤为：
+. 在 ''viewport'' 添加 ''viewport-fit=cover''
+. 给 Tabbar 添加 ''padding-bottom''
+<code css>
+.tabbar {
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+}
+</code>
+. 检查所有页面的元素，通过 ''@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 =====
+  * [[https://www.zhihu.com/question/34556725|在做 iOS 和 Android 的 HTML5 开发时，你都掉到过哪些坑里？]]