移动和桌面中的相同 CSS 具有不同的边距/填充答案

【问题标题】：Same CSS in Mobile & Desktop with different margins/paddings移动和桌面中的相同 CSS 具有不同的边距/填充
【发布时间】：2014-02-23 07:26:26
【问题描述】：

我有一个站点，其中填充和边距在设备之间的显示方式不同。我在 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; 代码段，但没有任何区别。

【问题讨论】：

为什么不使用媒体查询？在此处查看设备的一些默认定义。 css-tricks.com/snippets/css/media-queries-for-standard-devices
是的，我会使用媒体查询，但这必须先解决...

标签： android html css mobile

【解决方案1】：

有什么不同？您始终可以使用通用 css 选择器* 进行“重置”

*{padding:0;margin:0;}

【讨论】：

【解决方案2】：

@media screen and(min-width:320px){
//what ever styles.
}

@media screen and(min-width:990px){
//what ever styles.
}

媒体查询最适合此同意

【讨论】：

【解决方案3】：

也许我理解错了这个问题，但我认为他的问题是为什么他的网站在不同的浏览器中有不同的边距。

在这种情况下你必须知道：

每个浏览器都有自己的默认“用户代理”样式表，用于使未设置样式的网站看起来更清晰。例如，大多数浏览器默认将链接设为蓝色，将访问链接设为紫色，为表格提供一定数量的边框和填充，对 H1、H2、H3 等应用可变字体大小，并为几乎所有内容设置一定数量的填充。 - http://www.cssreset.com/what-is-a-css-reset/

要解决这个问题，您可以使用像 normalize (https://github.com/necolas/normalize.css) 这样的“css 重置”，这将使您的网站无论使用哪种网络浏览器看起来都一样。

【讨论】：

我在 CSS 样式表的顶部进行重置

【解决方案4】：

拉了我几天的头发，答案（简单，像往常一样遇到这种问题）：

<meta name="viewport" content="initial-scale=1">

所以，在自责之后，我制定了一条规则：在考虑设备兼容性的情况下进行开发时，始终使用viewport 元标记。

【讨论】：