那些年hybrid遇到的兼容性bug

最新推荐文章于 2021-06-07 14:02:02 发布

大海的前端博客

最新推荐文章于 2021-06-07 14:02:02 发布

阅读量885

点赞数

分类专栏：前端适配移动端机型bug 文章标签： input

本文链接：https://blog.csdn.net/github_36673034/article/details/66974830

版权

前端适配同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

移动端机型bug

1 篇文章 0 订阅

订阅专栏

几个页面做完了和大家分享下自己的感受。
1.input 聚焦是焦点太大
解决办法
给input外层加一个div，div的高度设置成input的高度（可以稍微高点），这样避免聚焦时焦点太丑。

2.input placeholder显示不全
解决办法
给input一个宽度，可以是100%。这样显示全placeholder里边的内容。

3.a链接跳页面，重新回到此页面时，需要跳两次才能到跳出
实例：1-2-1点击1两次跳出1
解决办法1-2的跳转不用a改成点击跳转

4.静态资源要在spring中配置

5.position:fixed 点击键盘页面错乱
解决办法：1进入页面只有用js获取设备高度赋值给body或则content ，这样会出现滚动条.
2.把用fixed定位的footer(为例)放在content之外。content之内增加一个footerpush来放置footer
直接上代码：

<body>
		<div class="content">
					<div class="footerPush">
						<!--空div 为了让footer能永远置于页面底部-->
					</div>			
		</div>
		<footer>我是footer</footer>
</body>

html{
	height: 100%;
}
body{
	height: 100%;
	background-color: rgb(240, 238, 245);
}
.content {
	min-height: 100%;
}
.footerPush{
}
footer {
	font-size: 12px;
	text-align: center;
	line-height: 40px;
	height: 40px;
	margin-top: -40px;
}

完美解决。
5.iphoneX底部刘海问题

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> 可以充满屏幕
ios工程师控制下整体的webview大小，完美解决

6.iphone弹簧效果

在这里插入代码片前端方案千千万，大部分都是控制body的touchmove，或者重写，其实可以让ios做下，一句话搞定
UIWebView *web= [UIWebView new];

web.scrollView.bounces = NO;

7.移动端遮罩层下方滑动

<div class=""contaier">
	<div></div>
	<div></div>
	<div></div>...
</div>
安卓：
.contaier{overflow：hidden;}就行
苹果+安卓:当弹起浮层
.container{
	positon:fixed;
	height: 100%;
    -webkit-overflow-scrolling : touch;
  }
  关闭浮层：
  .container{
	positon:relative;
	height: 100%;
    -webkit-overflow-scrolling : touch;
  }

大海的前端博客

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
那些年hybrid遇到的兼容性bug

几个页面做完了和大家分享下自己的感受。 1.input 聚焦是焦点太大解决办法给input外层加一个div，div的高度设置成input的高度（可以稍微高点），这样避免聚焦时焦点太丑。2.input placeholder显示不全解决办法给input一个宽度，可以是100%。这样显示全placeholder里边的内容。3.a链接跳页面，重新回到此页面时，需要跳两次才能到跳出实例
复制链接

扫一扫