几个页面做完了和大家分享下自己的感受。
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;
}