0 / 0 / 0
Регистрация: 02.03.2016
Сообщений: 36
1

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

02.02.2019, 13:21. Показов 8115. Ответов 4
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Добрый день.

Есть php/html страница.

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
<!doctype html>
<?php
require_once("connect.php");
require_once("search_dia.php");
require_once("vars.php");
session_start();
 
?>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<title>Главная страница</title>
<link rel="stylesheet" href="styles/style.css">
<link rel="stylesheet" href="styles/style_mobile.css">
<script src="scripts/jquery-3.2.1.min.js"></script>
<script src="scripts/carhartl-jquery-cookie-92b7715/jquery.cookie.js"></script>
<script src="scripts/script_style.js"></script>
    
</head>
 
    <body>
    <div class="wrapper">
    <header class="index_header">
        
        <a href="index.php"><img src="images/logo.png" class="header_logo"></a>
        
    <?php
        search_dia($dbc);
        if(isset($_SESSION['user_id'])){
        echo('<p class="login">Добро пожаловать, '.$_SESSION['username'].'. | <a href="logout.php">Выйти</a></p>'); 
        
            
    ?>
        
    </header>
        
         
            
        
        
        <section class="main">
            
            <div class="table_area">
                <div class="table_row">
        
            <div class="dialog_area">
            <span class="dia_h">Мои диалоги</span>
            <span class="saysay"><a href="index.php?cd=1">Рассказать +</a></span>
            <ul class="dialog_list">
                
                
                <?php
            search_dia($dbc);
            
            $query_dialogs="SELECT * from dia where autors_id='".$_SESSION['user_id']."' OR recipient_id='".$_SESSION['user_id']."' order by last_upd desc";
            $dialogs_result=mysqli_query($dbc, $query_dialogs) or die('ошибка запроса');
            if(mysqli_num_rows($dialogs_result)>0){
                //диалоги найдены
                while($row_result=mysqli_fetch_array($dialogs_result)){
                    
                $query_mes="SELECT sen_id from message where alogdi_id=".$row_result['dialogs_id']." order by sen_date desc";
                $mes_result=mysqli_query($dbc, $query_mes) or die('Error searching message');
                $mes_row=mysqli_fetch_array($mes_result);
                    
                if($mes_row['sender_id']==$_SESSION['user_id'] || (mysqli_num_rows($mes_result)==0 && $row_result['autors_id']==$_SESSION['user_id'])){
                    
                    
                echo "<li><a href='?di=".$row_result['dialogs_id']."'><span class='mail_icon'></span><span class='dia_prew'>Диалог</span>#<span class='dia_num'>".$row_result['dialogs_id']."</span></a></li>";} else{
                    //если автор сообщения не авторизованный юзер
                    echo "<li><a href='?di=".$row_result['dialogs_id']."'><span class='mail_icon mail_icon_new'></span><span class='dia_prew'>Диалог</span>#<span class='dia_num'>".$row_result['dialogs_id']."</span></a></li>";
                    
                   
                }
                    
                }
                
                
            }
            
            else{
                //диалоги не найдены
                
                
            }
            
            
            
            
                ?>
                
                
               
            
            
            
            </ul>
            
            </div>
            
            <div class="message_area">
                <span class="dia_h">Моя переписка</span>
            
            <ul class="message_list">
                
                <?php
            
            //блок кода создания диалога
            
            if(isset($_GET['cd']) && !empty($_SESSION['user_id'])){
                //все ок, вывести форму
                echo "<form method='post' action='".$_SERVER['PHP_SELF']."' class='create_dia'>
                <textarea class='create_inp' name='create_inp' placeholder='Введите текст сообщения' require></textarea> 
                <input type='submit' value='Отправить записку' class='input_submit input_create' name='create_but'/>
                
               
            
            
                
            </form>";
                
                
                
            }
            
            //блок когда создания диалога
            
            $last_li=0;
            if(isset($_GET['di']) && !empty($_SESSION['user_id'])){
                
                $query_dialog="SELECT * from dialogs where dialogs_id=".$_GET['di'];
                $query_dialog_result=mysqli_query($dbc,$query_dialog) or die ('ошибка доступа к диалогу');
                if(mysqli_num_rows($query_dialog_result)>0){
                    //такой диалог есть
                    $dialog_rr=mysqli_fetch_array($query_dialog_result); //строка с информацией о диалоге
                    if($dialog_rr['autors_id']==$_SESSION['user_id'] || $dialog_rr['recipient_id']==$_SESSION['user_id']){
                    //проверяем, что авторизованный пользователь либо автор либо получатель диалога    
                        
                        
                        
                    
                    if($dialog_rr['autors_id']==$_SESSION['user_id']){
                        
                        //если автор диалога авторизованный пользователей
                        $last_li=0;
                        echo "<li class='autor'>".$dialog_rr['caption']."</li>";
                    } else{
                        //если автор диалога кто-то другой
                        $last_li=1;
                        echo "<li class='rec'>".$dialog_rr['caption']."</li>";
                        
                    }
                        
                        $query_mes="SELECT * from message where (dialog_id =".$_GET['di']." AND recipient_id=".$_SESSION['user_id'].") OR (dialog_id=".$_GET['di']." AND sender_id=".$_SESSION['user_id'].") order by sending_date";
                        $query_mes_res=mysqli_query($dbc,$query_mes) or die ('ошибка доступа к сообщениям');
                        while($mes_row=mysqli_fetch_array($query_mes_res)){
                            //подгружаем сообщения
                            if($mes_row['sender_id']==$_SESSION['user_id']){
                                
                                //автор сообщения авторизованный пользователь
                                $last_li=0;
                                echo "<li class='autor'>".$mes_row['content']."</li>";
                            } else{
                                
                                //автор сообщения кто-то другой
                                $last_li=1;
                                echo "<li class='rec'>".$mes_row['content']."</li>";
                            }
                            
                            
                        }
                    
                    
                } else{
                        
                        //пользователь не имеет доступа к этому диалогу
                        echo "Ошибка доступа к диалогу";
                    }
            }
            
            }
            
            ?>
               
               
                
                
            </ul>
                
                
               <?php
            
            if($last_li==1){
                
          echo  "<form method='post' action='".$_SERVER['PHP_SELF']."' class='write_mes'>
                <input type='text' class='write_inp' name='write_inp' placeholder='Введите текст сообщения' require/> 
                <button type='submit' class='write_but' name='write_but'></button>
                <input type='hidden' name='did' value='".$_GET['di']."'>
               
            
            
                
            </form>";}
                
                ?>
                
          
            </div>
                    
                </div>
                
            </div>
        
        </section>
    <?php } else{
            
            //если пользователь не авторизован
            
            echo "
        
        <div class='img_cont'>
           <img src='images/poster2.png'/>
           
        
        <div class='reg_field'>
        <a href='registration.php'><span class='use_h index_h input_submit'>Регистрация</span></a>
        </div>    
        <span id='reg_accept'>Если у вас уже есть аккаунт пользователя, вы можете <a href='login.php' style='text-decoration:underline;text-decoration-style:dotted;'>авторизоваться</a>.</span>    
          
            
           </div> 
            
            ";
            
            
            
        } ?>
    
    
    <?php require_once('footer.php');?>
        </div>
    </body>
 
 
 
</html>
Для нее прописал стили для мобильных устройств

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
@media screen and (max-width:480px){
    
    html{
        max-width: 320px;
        border: 1px solid red;
        margin: 0px;
        padding: 0px;
        overflow-x: hidden;
    }
   
.wrapper{
        
        height: 100%;
        overflow-x: hidden;
        margin: 0 auto;
        
    }
    
    .index_header{
        
        max-width: 320px;
        border: 1px solid red;
    }
 
    
    body{
        
    width: 320px !important;
 padding: 0px;
 
    font-family: Verdana, Helvetica, Arial, sans-serif;
   margin: 0px;
        margin-right: 1500px;
   overflow-x: hidden !important;
    position: relative;
    background-color: rgb(249,249,249);
    //box-shadow: 2px 1px 4px 0px rgba(220,220,220,1);
    
   
    }
    
    
    .header_logo{
        
        width: 75px;
    }
    
    .login{
        
        font-size: 12px;
    }
    
    .footer_ul{
        
        width: 280px;
        display: inline-block;
    }
    
    .dia_prew{
        
        display: none;
    }
    
    .mail_icon{
        
        width: 20px;
        height: 25px;
        margin-right: 0px;
    }
    
    .dia_num{
        
        font-size: 14px;
        margin-right: 7px;
    }
    
    .saysay{
        
        font-size: 14px;
        margin-bottom: 0px;
    }
    
    .table_area{
        
        display: inline-block;
    border-spacing: 0px;
    width: 320px;
    overflow-x: hidden;
    }
    
    .table_row{
        
        display: inline-block;
         vertical-align: top;
         border: none;
         margin:0px;
    }
    
    .dia_h{
        
        display: inline-block;
        font-size: 14px;
        margin:0px;
    }
    
    .dialog_area{
        
    display: block;
    vertical-align: top;
    position: relative;
    width: 320px;
    height: 100px;
    margin-bottom: 0px;
    margin:0px;
    //margin-top: 0px;
    }
    
    .dialog_list{
        
    list-style-type: none;
    margin: 0px;
    padding: 0 0 0 15px;
    //height: 95%;
    height: 50px;
    max-width: 320px;
        white-space: nowrap;
    }
    
    .dialog_list li{
         vertical-align: middle;
         margin: 0px;
        display: inline;
        
    }
    
    .message_area{
        
        display: inline-block;
        width: 100%;
        margin-top: 0px;
        margin:0px;
    vertical-align: top;
    position: relative;
    //top: 0px;
    //left: 450px;
    //border: 1px solid black;
    height: 100%;
    
    //max-width: 670px;
    }
    
    .message_list li{
        
        font-size: 12px;
        min-height: 20px;
    }
    
    .write_inp{
         height: 75px;
    width: 80%;
    margin-left: 12px;
}
    
    .write_but{
         height: 25px;
    width: 25px;
        
    }
        
    }
    
    
    
}
При загрузке страница подгружается нормально, то есть весь контент на экран телефона помещается, но появляется скролл бар внизу, который прокручивает какой-то невероятный отступ.

hidden для overflow-x проставил буквально везде, чтобы проверить, может какой-то элемент вылезает, но ничего не вылезает.

Даже если прописать border:1px solid red; для всех блоков, видно, что они умещаются друг в друге.

Если этот же border прописать к самому элементу html, то видно, что обведена страница, а справа от нее какой-то отступ, на который ничего не действует, ни margin, ни padding, ни hidden.

Подскажите как это убрать? Ведь на других сайтах мобильные версии отображаются без всяких полос.

Добавлено через 11 минут
Сейчас попробовал вообще убрать весь контент со страницы, и загрузил пустую, но с мобильной версии. Даже в пустой странице появляется эта непонятная полоса прокрутки. В чем может быть проблема?
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
02.02.2019, 13:21
Ответы с готовыми решениями:

Отступ справа на мобильной версии сайта
https://ruflex.000webhostapp.com/main2/ заметил на своем сайте отступ справа именно на мобильной...

Убрать отступ справа в мобильной версии сайта
Добрый день. Помогите, пожалуйста, разобраться с проблемой. На сайте при разрешении &lt; 640px...

Отступ справа в мобильной версии
Доброго всем времени суток! В мобильной версии сайта, справа есть отступ (выделено красным) и я не...

В мобильной версии сайта появляется отступ слева
Здравствуйте. Уже час ломаю голову над тем, почему на мобильном экране, страница съезжает вправо? ...

4
1025 / 678 / 295
Регистрация: 04.04.2013
Сообщений: 2,707
02.02.2019, 13:38 2
DSLS, ну вот же у вас отступ:
CSS
1
2
3
body{
        margin-right: 1500px;
}
0
0 / 0 / 0
Регистрация: 02.03.2016
Сообщений: 36
02.02.2019, 13:46  [ТС] 3
Academik, это отступ я добавлял, чтобы узнать, вообще влияет ли этот margin на что-нибудь или нет, забыл убрать из кода. Но этот margin ни на что не влияет, хоть убирай, хоть ставь его большим, этот отступ на мобильных версиях все равно откуда-то берется.
0
1025 / 678 / 295
Регистрация: 04.04.2013
Сообщений: 2,707
02.02.2019, 13:53 4
DSLS, покажите полный код html/css либо дайте ссылку на ресурс.
0
0 / 0 / 0
Регистрация: 02.03.2016
Сообщений: 36
02.02.2019, 14:17  [ТС] 5
Все, проблема решена.

Оказалось, что в оригинальном файле стилей для тега body было прописано правило

min-width:960px;

из-за него этот отступ и был.

Ошибочно полагал, что медиа-запрос перекрывает оригинальный файл стилей, хотя он просто переопределяет указанные мной правила.
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
02.02.2019, 14:17
Помогаю со студенческими работами здесь

Создание мобильной версии сайта
Подскажите как реализовать? При помощи @media handheld (screen) не получается. Добавлено через...

Шаблон мобильной версии сайта
Не подскажете где найти шаблоны для сайта заточенных под телефоны и КПК? Нужен просто шаблон на...

Логотип в мобильной версии сайта
Здравствуйте. Скачал шаблон, вставил свой лого, он в мобильной версии больше ширины экрана.Как...

Тестирование мобильной версии сайта
Делаю мобильную версию сайта, адаптивной версткой но не могу понять как на пк можно посмотреть, не...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2023, CyberForum.ru