HTML и CSS неправильно отображаются на Retina 2800x2000

У меня проблема с отображением моего веб-сайта на больших дисплеях Retina. На десктопе и мобильном телефоне все идет хорошо, но на экране MacBook Retina он выглядит огромным и не помещается в браузере. Есть ли способ сделать .container одинаковой ширины и высоты и плавать вверху слева на всех устройствах и на всех экранах ()?

<body> <div class="container"> <nav> </nav> </div> </body>

вот веб-сайт: www.pctutorials.16mb.com

Вот код:

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    line-height: 0;
}

html {
    height: 100%;
}

body {
    width: 100%;
    height: 100%;
    position: relative;
    float: left;
    -webkit-text-size-adjust:100%;
    -ms-text-size-adjust:none;
}

p {
    font-family: Arial, sans-serif;
    font-size: 13px;
    line-height: normal;
    color: white;
}

.container {
    width: 2000px;
    height: 1080px;
    position: relative;
    float: left;
    overflow: hidden;
    background: url("images/background.jpg") no-repeat top left;
    background-size: 2000px 1080px;
}

html css responsive-design cross-browser retina
person Roba Konarskis    schedule 17.06.2015    source источник
comment
Добро пожаловать в Stack Overflow. Можете ли вы также предоставить нам базовую структуру вашего HTML-кода?   -  person Dinei    schedule 17.06.2015
comment
‹body› ‹div class=container› ‹nav› ‹/nav› ‹/div› ‹/body› вот сайт: www.pctutorials.16mb.com   -  person Roba Konarskis    schedule 17.06.2015
comment
Можете ли вы отредактировать вопрос и добавить соответствующий HTML-код в сам вопрос?   -  person Ravimallya    schedule 18.06.2015

Ответы (1)


arrow_upward
0
arrow_downward

Прежде всего, вы устанавливаете .container фиксированные значения width и height. То же самое касается элемента nav.

Вот почему ваша веб-страница не помещается на MacBook (и почти на всех других ноутбуках, retina или нет).

Чтобы исправить это, я бы начал с:

.container {
    width: 100%;
    height: 100%;
    ...
}

и

nav {
    height: 100%;
    ...
}

Затем вам нужно будет поиграть с is .nav-menu, который может быть обрезан на небольших экранах. К сожалению, вы не можете исправить это, не поигравшись немного с медиа-запросами.

person Wojciech Maj    schedule 17.06.2015
comment
Спасибо за это. немного поигрался с запросами @media, но не получил достойного результата. Он по-прежнему продолжал отображаться ужасно. - person Roba Konarskis; 17.06.2015