我遇到了响应式设计的问题。由于它是针对移动设备进行优化的,因此我添加了一个视口元标记,该标记应确保页面在没有任何缩放的情况下加载并占据整个视口。但是,这是发生的事情:
作为参考,下方工具栏菜单是位置:固定,因此不包括在正常页面流中,使其成为"正常"宽度。 这种情况发生在Chrome和Firefox移动版中,因此我认为它不依赖于浏览器。 Chrome远程设备调试会话显示标题与< body>完全一样宽。和< html>元素,所以问题在于页面本身而不是单独的标题。
这是我的代码(为简单起见,删除了菜单):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="header">
<h1>TremeClothing</h1>
<form id="search" action="page.php?stuff=things">
<input type="text" name="search" autocomplete="off" spellcheck="false" />
</form>
</div>
</body>
</html>
和
body {
margin: 0;
padding: 0;
background-color: rgb(240, 240, 240);
font-size: 20pt;
}
#header {
width: 100%;
padding: 0.5rem 1rem 1rem 1rem;
background-color: rgb(0, 51, 51);
position: relative;
box-sizing: border-box;
text-align: center;
}
#header h1 {
display: inline;
margin: 0;
padding: 0;
color: rgb(102, 153, 153);
font-size: 3rem;
}
#search {
display: inline-block;
height: 3rem;
width: 16rem;
margin: 1rem 3rem 0 3rem;
}
#search input {
display: block;
height: 100%;
width: 100%;
padding: 0.5rem 0.5rem 0.5rem 3rem;
box-sizing: border-box;
background: rgb(102, 153, 153) no-repeat 0.5rem 0.5rem/2rem url(img/icons/search.svg);
color: rgb(0, 51, 51);
font-size: 1.5rem;
font-weight: bold;
border: none;
border-radius: 2rem;
}
#search input:focus {
outline: none;
}
答案 0 :(得分:0)
您的网页缩放正确。
搜索栏开始滑离页面的原因是因为#search
的宽度固定为16rem
,因此增加了3rem
的固定边距,比你的手机屏幕略宽。尝试将此用于#search
样式:
display: inline-block;
height: 3rem;
width: 80%;
max-width: 16rem;
margin: 1rem 10% 0 10%;
这将确保#search
的宽度不流畅,且绝不会超过屏幕宽度的100%。