问题记录

一些问题收集

mac

unocss v^0.60.4

# unocss 在scripts中运行不能监听到全部文件，安装全局cli后，直接运行命令可以监听到全部文件

小程序

ios textarea padding-top/padding-bottom 会多出 20px，margin-left:-10px

let isIos = wx.getSystemInfoSync().platform === 'ios'

ios11 以下 用到 column 和 flex:1 时，flex:1 会失效（多用在整页布局上）

cover-view

# 尽量不用flex布局
# 尽量不使用 mode="aspectFill"(swiper-item cover失效，少用吧),用object-fit: cover;代替

移动端

iosh5

# 加上这个多个滚动区域不卡顿
-webkit-overflow-scrolling: touch;
# 使用fixed可阻止上下回弹
# 使用fixed加-webkit-overflow-scrolling: touch;会导致fixed的z-index失效
# input输入后，需要滚动一下回到原页面，粗暴方法
window.scrollTo(0, 0)

部分安卓手机 vue-qrcode-component 组件，二维码默认使用 cavnas 显示问题

# scss eg:
.qr-code{
  width: 100px;
  height: 100px;
  canvas{
    width: 100%;
    height: 100%;
  }
  img{
    width: 100%;
    height: 100%;
  }
}

某些 android 版本(eg：5.0.1)iframe 内部可以滚动主页面不能滚动的问题

<iframe src="url" frameborder="0" width="100%" scrolling="auto" onload="iframeHeight(this)"></iframe>

iframe 里页页的内容将设有 overflow 的属性全部替换为 eg:overflow-x: inherit;

IOS 点击事件失效

<input type="checkbox" id=1>
<label for="1">选择</label>

<!-- 添加 onclick/touch事件 -->
<label onclick=""><input type="checkbox">选择</label>

<!-- 添加 css -->
label input {
  pointer-events: none;
}

web

Safari 音视频不会自动播放，没有 canplay 监听 详见

# 针对Safari preload="metadata"
if (navigator.userAgent.indexOf('Safari') > -1 && navigator.userAgent.indexOf('Chrome') < 1) {
    O.canplay = true;
}else if (f.get('Player').readyState <= 2){
}

ie9 只有前 31 个 link 或 style 标记关联的 CSS 能够应用，从第 32 个开始，其标记关联的 CSS 都将失效,CSS 文件的大小不能超过 288kb(超过切分为多个即可)

ie css 不支持 unset initial 关键字

要设置unset前添加默认属性。

ie11 字体图标显示不出来(添加静态文件缓存即可）

# nginx config eg
 location ~* .(gif|jpeg|jpg|png|woff|ttf|otf|svg|woff2|eot|woff2\?*|eot\?*|ttf\?*)$ {
       proxy_pass   http://127.0.0.1:4673;
       proxy_set_header Host $host;
       proxy_set_header X-Forward-For $remote_addr;
       expires 1d;
       access_log /var/log/eot.log main;
       proxy_hide_header Pragma;
       add_header Cache-Control "public, max-age=86400";
   }

打赏