常见移动端页面开发问题

发表于 | 分类于

  • IOS微信内部浏览器使用history.push()跳转页面无法使用微信sdk的api
    项目中一般都是在页面组件didmount的时候init微信sdk，因为微信是需要传入页面地址的，但是ios下使用history.push并不会改变window.href，所以初始化sdk的时候invalid signature。解决方案是，使用location.href跳转至需要使用sdk的页面。

  • safari和chrome的日期format不同
    具体表现为safari不识别yyyy-mm-dd，仅识别yyyy/mm/dd，chrome支持两种，请多使用moment或者dayjs之类的日期库

  • IOS下input输入框在点击输入法的’完成’后再点击input，不触发focus
    不知道为啥，解决方案给所有的input的onclick绑定一个事件，触发input的focus。

  • IOS下input输入框被弹起的输入法遮挡
    垃圾ios webview，不会自动将页面滚动到input，需要在所有的input的添加onfocus事件执行scrollIntoView方法。(小tips，某些横向滚动的元素也可以用scrollView来让他滚动到视野内，不考虑动画效果的话横向tab栏目可用

  • android webview 某些情况下location.replace无效
    这个其实是android app的设置问题，在与客户端的同事沟通后不可以更改设置，也就是说没办法让location.replace生效，只能使用history.replaceState来代替。（顺便可以了解下，replace和replaceState是为了不让当前页面存储到浏览器历史纪录里面，让history.back（）不返回该页面。

  • IOS点击返回时页面不刷新
    嗯，这个是BFcache，stackoverflow链接如下https://stackoverflow.com/questions/8788802/prevent-safari-loading-from-cache-when-back-button-is-clicked。
    response 返回Cache-Control:no-store 或者html添加meta标签 可以尝试一下，但是貌似不保真。

    http-equiv
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    - **webpack打包后不支持safari10**  
    好家伙，其实是uglify js不支持safari10，需要添加配置项
    ```javascript
    build:{
    		plugins: [
    			new uglifyjsWebpackPlugin({
    				mangle: {
    					safari10: true
     				}
    			})
    		]
    	}

  • vue第三方使用第三方组件无法修改组件中的样式
    这玩意儿很抽象，搜了半天发现是写在vue-loader的文档中的链接如下https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors。 可以使用 >>> 、 /deep/、v-deep 三种方法

  • vue ios下返回上一页页面空白
    老问题了就是ios的锅 https://github.com/vuejs/vue/issues/5533 具体解决方案可尝试以下两种
    1: 手动将window滚动一下，比如加载完成后手动调用window.scrollTo(0,0) window.scrollTo(0,1)
    2: 每一次（比如全局beforeEach）都将History.scrollRestoration 设置为’manual’

  • ios 手动聚焦input不生效
    ios天锅，非用户触发是无法自动聚焦input，可以使用autofocus 但是一个页面只能有一个autofocus具体可以参考 https://www.zhangxinxu.com/wordpress/2020/10/ios-safari-input-button-focus/ 和 https://juejin.cn/post/7034707796545241095