移动端开发去除默认css样式/overflow问题

责编:menVScode 2018-01-03 22:57 阅读(1103)

        清除点击阴影:-webkit-tap-highlight-color

a, 
input, 
button{
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

        清除按钮圆角 (ios上):-webkit-appearance

input, 
button {
    -webkit-appearance: none;
    border-radius: 0;
}

        选中文字设置:-webkit-user-select

        禁止文字缩放:-webkit-text-size-adjust 

body * {
    -webkit-text-size-adjust: 100%;
    -webkit-user-select: none;
}

        默认字体设置:Helvetica

        每台设备的浏览器默认字体都不太一样,PC端字体基本上是微软雅黑和宋体等;但是移动端没有这几种字体,所有移动端都有Helvetica,而且还是英文字体。

body {
    font-family: Helvetica;
}


        Font Boosting问题

        别名:Text Autosizer(文本自调)、Font Inflation(字体膨胀)。字体显示尺寸比CSS中指定尺寸大。Chrome自行放大页面字体的大小。

        当我们在手机上浏览网页时,很可能因为原始页面宽度较大,在手机屏幕上缩小后就看不清其中的文字了。而 Font Boosting 特性在这时会自动将其中的文字字体变大,保证在即不需要左右滑动屏幕,也不需要双击放大屏幕内容的前提下,也可以让人们方便的阅读页面中的文本。

        Font Boosting问题出现的情况:在一段文字我们没有给他设置高度的时候,在webkit内核下,文字的大小被浏览器放大了

        解决办法:(1)设置高度;(2)设置最大高度 max-height;

        fixed固定定位问题

        (1)通过css的absolute模拟定位

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no">
<title>Document</title>
<style type="text/css">
    html {height: 100%;overflow: hidden;position: relative;}
    body {height: 100%;margin: 0;overflow: auto;}
    header {position: absolute;width: 100%;height: 40px;background: rgba(0, 0, 0, .5);color: #fff;}
    section {padding-top: 40px;}
</style>
</head>
<body>
<header>我是一个头部</header>
<section>
	页面内容<br/>
	页面内容<br/>
	页面内容<br/>
	...
	页面内容<br/>
	页面内容<br/>
</section>
</body>
</html>

       (2)用js来写。

         body 在 overflow:hidden 的情况下,如果内部元素宽度大于可视宽度的时候,也能横向拖动。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no">
<title>Document</title>
<style type="text/css">
    html {height: 100%;overflow: hidden;}
    body {height: 100%;margin: 0;overflow: hidden;position: relative;}
    #wrap{height: 100%;overflow: auto;}
    header {position: absolute;width: 200%;height: 40px;background: rgba(0, 0, 0, .5);color: #fff;text-align: center;}
    section {padding-top: 40px;}
</style>
</head>
<body>
	<!-- 解决方式:在最外层再包一层 -->
	<div id="wrap">
		<header>我是一个头部</header>
		<section>
			页面内容<br/>
			页面内容<br/>
			页面内容<br/>
			...
			页面内容<br/>
			页面内容<br/>
		</section>
	</div>
</body>
</html>
标签: 移动端 css
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码