Задать вопрос
@Jmaster
html

Как правильно задать размеры для мобильной версии вебсайта?

Здравствуйте . У меня есть вопрос по поводу мобильной верстки :
Как правильно задавать размеры в мобильной верстке?
Я нашел мобильный сайт этих ребят, чья ширина 640 пкс. И решил сделать мобильную версию своего сайта шириной 640пикселей. Но отображение моего сайта на Nexus4(768 ширина) и Sony Xperia(так же) искажается(до уменьшения), видна только половина сайта . В то время , как сайт-пример вполне прилично отображается . Что я делаю не так?
Вот код мобильной версии: 
<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Milan</title>
        <link rel="stylesheet" type="text/css" href="css/normalize.css">
        <link rel="stylesheet" type="text/css" href="css/main.css">
    </head>

    
    <body>
        
        <div class=" wrap">
            
            <div class="top">
                
                <div class="head">
                    <div class="head_wrap">
                        <img class="logo" src="img/logo.png">
                        <div class="vertical"></div>
                        <div class="part"> <span>83 752</span> участников в сообществе </div>
                        <span class="phone">
                            <img src="img/Phone.png">
                            <p>
                                8 (800) 500-26-27
                                <span>Бесплатно</span>
                            </p>
                        </span>
                    </div>
                </div>

                <div class="secret-sign">
                    <p class="secret-sign-big">
                        Каникулы
                    </p>
                    <p class="secret-sign-small">
                        онлайн интенсив-курс
                    </p>
                </div>
                
                <div class="sign_designer">   
                    <p>Откройтесь для себя</p>
                </div>
                
            </div>
            
            <div class="instruction">
                    <p>Пошаговая инструкция  <span>к успеху</span></p>
            </div>
            
            <div class="video_form">
                
                <div class="video_form_wrap">  
                    
                    
                    <!-- Video -->
                    <video class="movie" controls>
                 
                    </video>
                    
                    <!-- Form -->
                    <form class="competition">
                        <p class="form_sign_1">
                            Для участия в курсе 
оставьте
                        </p>
                        <input type="text" class="email" name="email" placeholder="Ваш email">
                        <a class="btn"> получить доступ</a>
                        <p class="form_sign_2">
                            Сразу после заполнения формы вас ждет 
                            <span>подарок </span>
                        </p>
                    </form>
                    
                </div>  
                
            </div>
            
            <div class="intensive_course">
                <p>На курсе вы узнаете:</p>
            </div>
            
            <div class="ic_params">
                <ul>
                    <li>Цикл создания :</li>
                    <li>Портрет идеального клиента - как правильно выбрать целевую аудиторию</li>
                    <li>Скетчбук - библия дизайнера. Как правильно работать </li>
                    <li>Все что нужно, чтобы стать профессионалом</li>
                </ul>
            </div>
            
            <div class="btn_2_container">
                <a class="btn_2">да, я хочу пройти курс</a>
            </div>
            
            <div class="acces">
                <p> Доступ   </p>
            </div>
            
            
        </div>
        
        <div class="footer">
                
        </div>
        
        <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>

    </body>
    
</html>


П.С. Первый мобильный вариант для меня . Прошу ответить терпеливо и доступно. Спасибо.
  • Вопрос задан
  • 8001 просмотр
Комментировать
Подписаться 4 Оценить Комментировать
Решения вопроса 1
Serj-One
@Serj-One
i'm sexy and i know it
В примере, что вы дали, есть строка:
<meta name="viewport" content="width=640, user-scalable=no" />

На самом деле, делать так не очень хорошо.
Если делате именно мобильную версию, небольшой ширины, вообще не указывайте viewport, сайт будет масштабироваться по ширине устройства.
В случае с адаптивной вёрсткой ипользуйте
<meta name="viewport" content="width=device-width, initial-scale=1">

И к чему вот это всё:
min-width: 640px;
width: 100%;
max-width: 640px;
?
Вам не кажется, что правильно было бы просто:
width: 640px;
?
Ответ написан
20 комментариев
20 комментариев
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
WordPress-разработчик
div. • Ставрополь
от 50 000 до 120 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Смонтировать видео
23 нояб. 2024, в 01:31
1000 руб./за проект
Настроить сайт
23 нояб. 2024, в 00:16
2000 руб./за проект
Разобрать текущий ETL-процесс
22 нояб. 2024, в 23:55
3000 руб./за проект
Ещё заказы