随笔分类 - Browser Compatibility
浏览器兼容性问题
摘要：先看下兼容性： 可以看到 @supports 兼容性很好，所以使用 @supports 做兼容是个不错的选择。 例： @supports (padding-bottom: env(safe-area-inset-bottom)) or (padding-bottom: constant(safe-a
阅读全文
摘要：首先，在拖动 div 时，判断当前容器 div 是否有滚动条，如果没有，则禁止整个 div 拖动，例： const list_dom: any = document.querySelector(".list"); list_dom.addEventListener("touchmove",(ev)
阅读全文
摘要：之所以100vh在移动端出现问题，原因大致如上图，真搞不懂，为什么总是有反人类的设计出现。 经过多方参考，实测有效的方案如下： <style> :root { --vh: 1vh; } </style> <script> !(function (n, e) { function setViewHei
阅读全文
摘要：同这篇文章一样，用到了-webkit-overflow-scrolling: touch;属性。主要解决方案是在iframe外层添加一个div，然后设置-webkit-overflow-scrolling属性。 例如： MDN文档：https://developer.mozilla.org/zh-C
阅读全文
摘要：正常的移动端上下滑动，松开手指页面还会速度递减的再滑动一段距离，但是有时候会出现手指松开滑动就停止的情况，导致页面出现卡顿的现象。 出现的原因大多数是因为加了： 可以在添加了overflow: auto;的元素上再添加下面的属性解决：
阅读全文
摘要：document.addEventListener('touchmove', function(e) { e.preventDefault();});
阅读全文
摘要：我们在进行页面架构的时候，一般会分成三个section：header、body、footer。如下面这个页面： 这个时候我们就需要对body部分进行最小高度设置，才能避免footer部分出现在页面中间的情况。比方说下面在这个写法： .page-content-header { min-height:
阅读全文
摘要：根据不同浏览器： <script type="text/javascript"> var version = navigator.userAgent; if (version.indexOf("MSIE") > 1) { document.write("<link href='ie.css' rel
阅读全文
摘要：<script type="text/javascript"> var isIE = function (ver) { var b = document.createElement('b') b.innerHTML = '<!--[if IE ' + ver + ']><i></i><![endif
阅读全文
摘要：<!doctype html> <html lang="zn-CN"> <head> <meta http-equiv="content-type" content="charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edg
阅读全文
摘要：if(navigator.userAgent.indexOf("MSIE 6.0") < 0) { //相应JavaScript脚本}
阅读全文
摘要：/*IE8支持placeholder占位符*/ if( !('placeholder' in document.createElement('input')) ){ $('input[placeholder],textarea[placeholder]').each(function(){ var
阅读全文
