Web前端填坑记录(持续更新)_setwebcontentdebug 作用

作者：天景科技苑 | 2024-08-06 10:50:24

踩

setwebcontentdebug 作用

1:android上如果内容超出容器，overflow-x 无效，必须将容器设置成fixed才行

2:android 上可滑动的区域，在ios上不一定好用，有时无法滑动，添加一下-webkit-overflow-scrolling:'touch'试试看，会有不一样的效果

3:ios上如果有input聚焦时候，用户如果使用的不是原生输入法，则input不会自动聚焦滚动

4:chrome调试webview的话，需要在安卓代码加入

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {

WebView.setWebContentsDebuggingEnabled(true);

这样才能保证全部手机可调式

5.ios下 input聚焦时，input被虚拟键盘挡住的解决方法：

在input聚焦的时候，监听windw的resize事件，在resize中延迟修正scrollTop即可，如：

common.resizeForInput = function (scrollHeight) {
 console.log('----------------common.resizeForInput-------------------');
 var deferTime = 500;
 setTimeout(function () {
 var nainfo = $.ajaxSettings.data;
 if (nainfo['os'] === 'android') {
 console.log('android');
 } else {
 console.log('ios');
 console.log(document.body.scrollTop);
 if (document.body.scrollTop < 200) {
 document.body.scrollTop = scrollHeight;
 }
 }
 }, deferTime);

}

6.使用iscroll的时候input 输入文字过长，造成闪屏的问题，是由于iscroll中的input在输入完成后，焦点没有blur，解决方法是：在input的onBlur事件中加入 document.activeElement.blur()

7.android 4.3以下布局有异常的时候，看看box布局加到容器上没，并且元素的flex到底设置了没

8.iscroll 在android 4.4以下 click事件有问题，点击一次会执行两次，对应方法就是判断设备和版本

// 安卓4.4以下版本 iscroll click会执行2次
function iScrollClick() {
var myUserAgent = navigator.userAgent;
// 安卓机器
if (myUserAgent !== null||myUserAgent !== 'undefined') {
if (myUserAgent.indexOf('Android') !== -1) {
var s = myUserAgent.substr(navigator.userAgent.indexOf('Android') + 8, 3);
var osversion = parseFloat(s[0] + s[2]);
if (osversion < 44) {
return false;
} else {
return true;
}

} else {
return true;
}
} else {
return true;
}
}

9.react中如果使用复合组件，比如var att=[]; att.push(Hello);tt.push(world)

render(return <div>{att}</div>) 这种时候，都要加上key属性，优化react diff性能

att.push(Hello);tt.push(world)

10.如果要计算一个字符串的长度，可以新建立一个隐藏的span标签，然后将文字加进去，最后得到span的宽度就ok了

11.在android 4.4中如果页面中存在input 点击后弹出键盘之后，输入内容关闭键盘后，页面上方存在白条，是因为页面高度问题

12.要使用Object.assign()等es6方法，光用babel的core还是不信的，需要添加对应的plugins

npm install babel-plugin-transform-object-assign

"plugins": ["transform-object-assign"]

13.react-router中如果使用了hashHistory，则render函数会执行两次，如果使用ReactCssTransitionGrpup进行动画切换，就要使用browserHistory，不然切换动画时，会clone两次

14. 如何实现数据的绑定，比如Object.observe

15.WebP格式图片比JPEG平均小25%

16.document.getElementByClassName 在IE8以及以下是不支持的，使用时候需要注意，如果不支持，可以配合 document.getElementByTagName(‘*’) 获取全部元素，在循环变量className是否相等的方法重写

17.触摸反馈，比如按钮押下效果，目前三种实现方式

a：可以使用:active 伪类实现，缺点是ios支持不好，需要在body上添加touchstart空事件作为处理，有延迟

b：可以在外层包装一个a标签，并用-webkit-tap-highlight-color这个属性修改，但只能改颜色和透明度效果

c：可以在事件中addClass和removeClass实现，略微麻烦，但效果最好

另外可以使用一个库：https://github.com/backToNature/touchFeedback/blob/master/doc/zh-cn.md

18.以下事件不冒泡：blur、focus、load、unload。

19.IOS8 fixed布局没用

20.postcss befor和after 不能自动添加前缀

21.最新版本的postcss中 webkit-flex 被删除了，在webpack中如下配置

postcss: [
autoprefixer({
browsers: [
'last 2 versions',
'iOS >= 8',
'Safari >= 8',
'Android > 4.1',
]
})
],

22.android的webview中，line-height的垂直居中对于字体小于12px的无效，主要是因为避免奇数font-size带来的偏差，设置成了偶数，所有会有一些偏上

解决办法：

1. 改变字体大小最直接的方法就是改变字体大小让它大于 12px 能够正常居中，如果页面对字体大小要求比较严格的话，可以先将原来包括 font-size 在内的属性放大两倍，再用 scale 缩小一倍，这样测试之后也是可行的：

jasonjin

.content {
     display: inline-block;
     height: 40px;
     background-color: gray;
     line-height: 40px;
     font-size: 20px;
     transform: scale(0.5);
     transform-origin: 0% 0%;
 }

2. table布局在元素外再包一层，使用表格布局


<div class="container">
    <span class="content">testtesttesttesttest</span>
</div>

.container {
     display: table;
 }
 .content {
     background-color: gray;
     font-size: 10px;
     display: table-cell;
     vertical-align: middle;
 }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/天景科技苑/article/detail/937081