前端开发问题总结

1、js用window.orientation监听手机横竖屏触发时文档未渲染完成，需要添加延时操作。可改用css解决

    /* 竖屏 */
    @media screen and (orientation: portrait) {
      html {
        font-size:calc(100vw * 100 / 750) !important;
      }
    }
    /* 横屏 */
    @media screen and (orientation:landscape) {
      html {
        font-size:37.5px !important;
      }
    }

2、placeholder样式修改

 input::-webkit-input-placeholder {
   /* WebKit browsers */
   font-size: 26px;
   color: rgba(153, 153, 153, 1);
 }
 input:-moz-placeholder {
   /* Mozilla Firefox 4 to 18 */
   font-size: 26px;
   color: rgba(153, 153, 153, 1);
 }
 input::-moz-placeholder {
   /* Mozilla Firefox 19+ */
   font-size: 26px;
   color: rgba(153, 153, 153, 1);
 }
 input:-ms-input-placeholder {
   /* Internet Explorer 10+ */
   font-size: 26px;
   color: rgba(153, 153, 153, 1);
 }

3、vant中van-collapse插槽使用失效

<van-collapse v-model="activeNames">
  <van-collapse-item name="1">
    <template #title>
      <div>标题1 <van-icon name="question-o" /></div>
    </template>
    内容
  </van-collapse-item>
</van-collapse>

版本问题，将#title改为slot="title"

4、移动端滚动卡顿、慢、失效

{
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

5、网站置灰

{
   filter：grayscale(100%)
}

6、form内button绑定的方法点击后刷新页面

form内button默认提交表单，可以把button放到form外