How to correctly set the dimensions for the mobile version of the website?

A

Abra Kadabra2014-11-18 02:42:39

css

Abra Kadabra, 2014-11-18 02:42:39

Hello . I have a question about mobile layout :
How to correctly set dimensions in mobile layout? I found these
guys mobile site which is 640px wide. And I decided to make the mobile version of my site 640 pixels wide. But the display of my site on Nexus4 (768 width) and Sony Xperia (also) is distorted (before reduction), only half of the site is visible. While the example site is quite decently displayed. What am I doing wrong? Here is the code for the mobile version:

<!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>

P.S. The first mobile option for me. Please answer patiently and openly. Thank you.

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

S

Serj-One, 2014-11-18
@Jmaster

In the example you gave, there is a line:
In fact, doing so is not very good.
If you make a mobile version, small width, do not specify a viewport at all, the site will be scaled to the width of the device.
In the case of adaptive layout, use
And what is this all about:

min-width: 640px;
width: 100%;
max-width: 640px;

?
Don't you think it would be correct to simply
: