我有一个站点，其中填充和边距在设备之间显示不同。我在 Android 设备和桌面 PC 中都有同一站点的屏幕截图:
移动设备中的站点:
桌面调整大小:
这是 CSS:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Diario */
* {
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
body {
font-family: Arial, sans;
font-size: 0.9em;
background-color: #ccc;
}
h1 {
font-weight: bold;
font-size: 130%;
margin-bottom: 0.5em;
}
#page {
}
#page header {
font-weight: bold;
padding: 1em;
color: #fff;
background-color: #000;
}
#page footer {
color: #fff;
background-color: #000;
text-align: center;
padding: 1em;
}
#page article {
padding: 1.5em;
margin-bottom: 0.5em;
line-height: 1.2em;
background-color: #fff;
box-shadow: 0 0.2em 0.5em #000;
}
#page article p {
margin-bottom: 0.5em;
}
#page article p.meta {
font-size: 85%;
color: #999;
}
#big {
margin-bottom: 2em;
}
#big article {
}
#normal {
}
#normal article {
}
#normal article:last-child {
margin-bottom: 0;
}
和 HTML 标记:
<!DOCTYPE html>
<html lang="es">
<head>
<title>El diario - <?php echo date('d-m-Y') ?></title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="page">
<header>
<p>El diario - <?php echo date('d-m-Y') ?></p>
</header>
<section id="big">
<article class="main">
<h1>Titulo de la noticia que ud. esta leyendo ahora mismo</h1>
<p class="meta">Publicado hace 2 días</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
<article class="sub">
<h1>Titulo de la noticia que ud. esta leyendo ahora mismo</h1>
<p class="meta">Publicado hace 2 días</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
<article class="sub">
<h1>Titulo de la noticia que ud. esta leyendo ahora mismo</h1>
<p class="meta">Publicado hace 2 días</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
<article class="sub">
<h1>Titulo de la noticia que ud. esta leyendo ahora mismo</h1>
<p class="meta">Publicado hace 2 días</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
</section>
<section id="normal">
<article>
<h1>Titulo de la noticia que ud. esta leyendo ahora mismo</h1>
<p class="meta">Publicado hace 2 días</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
<article>
<h1>Titulo de la noticia que ud. esta leyendo ahora mismo</h1>
<p class="meta">Publicado hace 2 días</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
</section>
<footer>
(C)<?php echo date('Y') ?> Leprosystems
</footer>
</div>
</body>
</html>
有什么想法吗？我一直在寻找类似的问题，到目前为止我找到的唯一答案是添加 -text-size-adjust: none; 一段代码，但它没有做任何区别。
最佳答案
也许我理解错了这个问题，但我认为他的问题是为什么他的网站在不同的浏览器中有不同的边距。
在这种情况下你必须知道:
every browser has its own default ‘user agent’ stylesheet, that it uses to make unstyled websites appear more legible. For example, most browsers by default make links blue and visited links purple, give tables a certain amount of border and padding, apply variable font-sizes to H1, H2, H3 etc. and a certain amount of padding to almost everything. - http://www.cssreset.com/what-is-a-css-reset/
要解决这个问题，您可以使用像 normalize (https://github.com/necolas/normalize.css) 这样的“css 重置”，这将使您的网站在任何网络浏览器中看起来都一样。
关于android - 具有不同边距/填充的移动和桌面中的相同 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21465878/