Author name: admin

mousedown、mouseup、click事件之间的关系及执行顺序

三个事件的触发时机mousedown当鼠标指针移动到元素上方,并按下鼠标按键(左、右键均可)时,会发生 mousedown 事件。与 click 事件不同,mousedown 事件仅需要按键被按下,而不需要松开即可发生。 mouseup当在元素上松开鼠标按键(左、右键均可)时,会发生 mouseup 事件。与 click 事件不同,mouseup 事件仅需要松开按钮。当鼠标指针位于元素上方时,放松鼠标按钮就会触发该事件。 click当鼠标指针停留在元素上方,然后按下并松开鼠标左键时,就会发生一次 click 事件。注意:触发click事件的条件是按下并松开鼠标左键!,按下并松开鼠标右键并不会触发click事件。 三个事件的触发顺序若在同一个元素上按下并松开鼠标左键,会依次触发mousedown、mouseup、click,前一个事件执行完毕才会执行下一个事件若在同一个元素上按下并松开鼠标右键,会依次触发mousedown、mouseup,前一个事件执行完毕才会执行下一个事件,不会触发click事件

How Vue Change Title

Configure chainWebpack in vue.config.js This will replace var in /public/index.html Change title fixed text Open file /public/index.html replace to Change the title of a specific page, set the title through document.title in the lifecycle hook function Use Vue-Route Middleware First define meta.title in route then add middleware to Vue router Advanced variant Using vue-meta first …

How Vue Change Title Read More »

css safe area

适配iphoneX底部的小黑条

背景 从苹果手机的iphoneX及以后,手机的屏幕顶部就出现了“齐刘海”和底部小黑横条的样式。不少app直接兼容了里面的webview的样式,屏幕在竖屏下顶部往往是导航栏,不会遮住webview里面的内容,而底部则从app层面设置了底部高度,使webview底部不在黑色横条区域内,这样就不会阻碍展示webview里面的内容。 但是,每个app千差万别,里面的webview也就展现不一,如果没有app底部高度,那么webview里面的底部内容就会被小黑条遮挡。从网页样式兼容性来说,需要兼容iphoneX后特有的“齐刘海”和底部小黑横条样式,又不影响以前机型的样式。 安全区域 首先了解一下iphoneX的安全区域,下图蓝色部分为安全区域,而两边的margin、顶部齐刘海和底部小黑条区域都属于不安全区域,属于内容有可能会被遮挡的区域,那么我们需要控制我们的内容在安全区域内。 安全区域 兼容方案 所幸,在iphoneX出来的时候,官方的ios11系统也提供了WebKit Api去兼容这种样式差异。 第一步:设置viewport-fit属性 viewport-fit有auto,contain,fit三个属性值,默认是auto。contain: 可视窗口完全包含网页内容, 页面内容显示在safe area内cover:网页内容完全覆盖可视窗口,页面内容充满屏幕auto:默认值,跟 contain 表现一致 viewprt-fit=contain viewprt-fit=cover 默认情况下,safari展示的是viewport-fit=contain的情况,如下图,在横屏下,webview里的页面内容在安全区域内,但是从样式上看,这不太美观,并且没有利用好iphoneX赋予的全屏特性。 image.png 设置viewport-fit=cover后,如下图,内容全屏展示,但是左边的内容被“齐刘海”挡住了。 image.png 为了解决这个问题,ios11中的WebKit包括了一个新的CSS函数env(),以及四个预定义的环境变量safe-area-inset-left、safe-area-inset-right、safe-area-inset-top和safe-area-inset-bottom。这四个环境变量代表了距离安全区域的距离。 safe-area-inset-left:安全区域距离左边边界距离 safe-area-inset-right:安全区域距离右边边界距离 safe-area-inset-top:安全区域距离顶部边界距离 safe-area-inset-bottom:安全区域距离底部边界距离 ios11.2以前用的是constants()函数,后来在ios11.2版本改成了env()函数,为了兼容两者,可以都写上。 第二步:设置安全区域距离 这样,当出现不在安全区域时,env(safe-area-inset-left)不等于0,那么就会导致在padding-left上设置了一个安全距离,从而使内容不被遮挡。 image.png 上面是被“齐刘海”挡住的情况,实际比较多的情况用在底部小黑条挡住悬浮bar的情况,加上属性支持判断@supports,只有env(safe-area-inset-bottom)被浏览器支持的时候才会执行里面的css。 注:微信内的webview是默认viewport-fit=cover的状态的,只需要设置安全距离即可,微信小程序同样适用上述方案。 iphonex以上手机非矩形界面适配前: image.png 适配后,iphonex以上手机非矩形界面自动适配底部高度: image.png 不是不规则矩形的情况: image.png 总结 手机在更新换代,随着手机样式发生改变,样式兼容问题也接踵而至,但是问题的制造者往往也是问题的解决者,开发者也不用焦虑找不到解决方案,从而使我们更专注业务逻辑本身。 参考文章 viewport-fit @supports designing-websites-for-iphone-x