IOS刘海屏H5 CSS适配

IOS刘海屏H5 CSS适配
在hybrid中,会遇到native把全屏交给webview的情况,在iphone刘海屏手机上就需要做刘海屏、底部小黑条适配了 safe area / 安全区域 iphonex之后引入的新概念,安全区域指的是一个可视窗口范围,处于安全区域的内容不受圆角(corners)、齐刘海(sensor housing)、小黑条(Home Indicator)影响 viewport-fit iOS11 新增特性,苹果公司为了适配 iPhoneX等刘海屏, 对现有 viewport meta 标签的一个扩展,用...

手机上input上传视频

手机上input上传视频
手机上input上传视频 手机上想要选择视频,但是点击input后没有录像选项, <input @change.stop="fileChange($event)" type="file" :id='id' accept="video/*" // 原来没加这个,加上就好了 multiple /> 参考: <input type="file" accept="image/*" capture="camera"> <input type="file" accept="video/*" capture="c...

css 五边形,六边形,八边形

css 五边形,六边形,八边形
css 五边形,六边形,八边形,需要考虑如下效果如何实现? <html> <head> <style> .sixedge{ height: 24px; width: 55px; position:relative; background-color: #FFF; border-top:1px solid green; border-bottom:1px solid green; margin-left:40%; } .sixedge:after{...

css3效果:波浪效果

css3效果:波浪效果
实现效果 如图所示: 首先得准备三张图,一张是浅黄色的背景图loading_bg.png,一张是深红色的图loading.png,最后一张为bolang.png。 css代码 body{background:#ffe894;} .loading_bg{width:113px; height:111px;background:url(loading_bg.png) no-repeat left top;margin:30px auto;} .loading{width:113px; height:111px;position:relative; -webkit-mask-image:url(loading.png);} .show{ ...

解决页面使用overflow: scroll在iOS上滑动卡顿的问题

解决页面使用overflow: scroll在iOS上滑动卡顿的问题
故事背景:最近的一次开发中,使用到了overflow:scroll 属性来滑动div。信心满满的以为不会出现任何问题,看来还是太清高自傲了,于是写下这篇随笔特此总结一番。 如果你对某个div或模块使用了overflow: scroll属性,在iOS系统的手机上浏览时,则会出现明显的卡顿现象。但是在android系统的手机上则不会出现该问题。大家不妨可以分别使用IOS和Android系统的手机浏览以下链接或扫描二维码后滑动文字区域查...

ul因为li浮动而没有被撑开

ul因为li浮动而没有被撑开
不清除浮动的一个常见危害是高度塌陷。关于高度,下面说这么几种情况: 如果父元素已经规定了度,不会高度塌陷,但可能会溢出(如果子元素总高度超过父元素的话) 如果父元素没有规定高度: 2.1 如果所有子元素都浮动,父元素没有高度,这时候给父元素设置边框的话,就会发现边框保不住子元素 2.2 如果存在没有浮动的子元素,父元素高度取决于没有浮动的子元素,所以如果浮动子元素更高的话,还是会塌陷 ...

移动端html5视频开发指南

移动端html5视频开发指南
随着html5的兴起,相信大家对html5中视频的解决方案都比较感兴趣,现将我们在开发视频应用的过程中遇到的坑总结如下,希望大家喜欢 在页面添加一个视频 <video src="demo.webm" type="video/webm"> <p>您的浏览器不支持video元素.</p> </video> 为video元素指定多个视频格式并不是所有的浏览器都支持同一种格式,source可以让开发者为video元素指定多个视频格式 ...

移动web前端meta通用设置

移动web前端meta通用设置
<!-- 页面字符编码 --> <meta charset="utf-8"> <!-- 避免IE使用兼容模式 --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!-- 启用360浏览器的极速模式(webkit) --> <meta name="renderer" content="webkit"> <!-- 微软的老式浏览器 --> <meta name="MobileOptimized" content="320"> <!-- 关键字描述 --&...
Copyright © web前端技术开发个人博客 保留所有权利  京ICP备14060653号 Theme  Ality

用户登录