Тот же CSS в Mobile & Desktop с разными полями/paddings

У меня есть сайт, где прокладки и поля отображаются по-разному между устройствами. У меня есть скриншоты одного и того же сайта в Android устройства и в моем настольном ПК:Тот же CSS в Mobile & Desktop с разными полями/paddings

сайта в мобильном устройстве:

Mobile

Desktop с измененным размером:

Desktop, resized

Вот 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;, но это не имело никакого значения.

источник

2014-01-30 Leprosy

Почему бы не использовать медиа-запросы? Посмотрите здесь некоторые определения устройств по умолчанию. http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ – zewa666

Да, я буду использовать медиа-запросы, но это должно быть разрешено сначала ... – Leprosy

После потянув меня за волосы в течение нескольких дней, ответ (просто, как обычно, с такого рода проблемами):

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

Итак, после того, как пинать себя, я тверда правило: ВСЕГДА используйте viewport метатега при разработке с совместимость устройств.

источник

2014-02-04 14:42:03 Leprosy

-1

Как это отличается? Вы всегда можете использовать универсальный селектор CSS * сделать «сброс»

*{padding:0;margin:0;}

источник

2014-01-30 19:38:45

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

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

медиа-запросы будут делать лучше всего для этого согласия

источник

2014-01-30 19:39:37

Может быть, я понял вопрос неправильно, но я думаю, что его вопрос был почему его веб-сайт имеет разные поля в разных браузерах.

В этом случае вы должны знать, что:

каждый браузер имеет свой собственный по умолчанию таблицы стилей «User Agent», который он использует, чтобы сделать веб-сайты появляются без стилей более разборчивыми. Например, большинство браузеров по умолчанию делают ссылки синими и посещенными ссылками фиолетовыми, дают таблицы определенное количество границ и отступов, применяют переменные размер шрифта к H1, H2, H3 и т. Д. И некоторую величину заполнения для почти всего. - http://www.cssreset.com/what-is-a-css-reset/

Чтобы решить эту проблему, вы можете использовать «сброс CSS», как нормализуются (https://github.com/necolas/normalize.css), который сделает ваш сайт выглядят одинаково независимо от того, веб-браузер.

источник

2014-01-30 20:01:08

Im делает сброс вверху стилиста css – Leprosy

Тот же CSS в Mobile & Desktop с разными полями/paddings

ответ

Смежные вопросы