Форум Сайтостроение Веб-строительство

Помогите сделать сайт "mobile"

12
J
На сайте с 08.06.2006
Offline
844
joost
1304

Есть старая тема ВП.

До новой обновить не выйдет по ряду причин.

Нужно подсредством viewport основную часть делать в размер экрана мобильного.

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

D.iK.iJ
На сайте с 26.05.2013
Offline
225
D.iK.iJ
#1

Подключить тег, подключить стили. Допустим, так.

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/adaptive.css" type="text/css">

Дальше обычно начинаю с заготовки:

@media screen and (max-width: 960px) {
img {max-width: 100% !important; height: auto !important; box-sizing: border-box;}
iframe, textarea, input, button, submit, select, video, object, embed {max-width: 100% !important; box-sizing: border-box;}
table, span, div, ins {max-width: 100% !important;}
}
@media screen and (max-width: 775px) {
}
@media screen and (max-width: 500px) {
//td, th {word-break: break-word; -moz-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;}
}

Ну и дальше тыкайте правой кнопкой => Просмотреть код или по [F12] и смотрите - что мешает сайту сжиматься. Советую сразу глянуть боди - минимальная ширина вдруг есть. И убрать отступы и float у колонки и контента.

А дальше хедер, футер, контент и проверить минимум в Хроме и Сафари десктопном - как уменьшаются страницы при уменьшении ширины окна браузера.

---------- Добавлено 20.09.2017 в 17:47 ----------

Да, если не повезло и правая колонка в коде выше контента, вот скрипт для меню. Там чистый Джаваскрипт и CSS

http://dikij.com/4italka/adaptive-javascript-menu.html

Адаптивный дизайн в 2 строчки ( https://dikij.com/wm/adaptaciya-saytov.php ). + Принимаю заказы любой сложности ( https://searchengines.guru/ru/forum/926323 ). 💎 Еще я делаю классные кулоны с опалами ( https://mosaicopal.ru/ ).
J
На сайте с 08.06.2006
Offline
844
joost
#2

у меня правая колонка перекрывает основной контент

хотя нет

точнее блоки адсенса и карта яндекс.карт не уменьшаются и перекрывают правую колонку

короче

выход - убрать ее (правую колонку) вниз - для мобильных выводить после основного контента

и задать минимальную ширину - чтобы была карта видна

стилями это реально? как?

В Рекламной сети Яндекса Партнерам РСЯ стал доступен Есть ли смысл рекламироваться
D.iK.iJ
На сайте с 26.05.2013
Offline
225
D.iK.iJ
#3

Стилями - это без проблем обычно. Или с проблемами, но тоже возможно. Тут от верстки зависит ))

J
На сайте с 08.06.2006
Offline
844
joost
#4

добавил только <meta name="viewport" content="width=device-width, initial-scale=1">

стало все большим

нужно немного уменьшить все

как это сделать стилями?

D.iK.iJ
На сайте с 26.05.2013
Offline
225
D.iK.iJ
#5
joost:
как это сделать стилями?

А все остальное я для кого писал? )))

J
На сайте с 08.06.2006
Offline
844
joost
#6

Не помагает

J
На сайте с 08.06.2006
Offline
844
joost
#7
@media screen and (max-width: 960px) {
img {max-width: 100% !important; height: auto !important; box-sizing: border-box;}
iframe, textarea, input, button, submit, select, video, object, embed {max-width: 100% !important; box-sizing: border-box;}
table, span, div, ins {max-width: 100% !important;}
}
@media screen and (max-width: 775px) {
}
@media screen and (max-width: 500px) {
//td, th {word-break: break-word; -moz-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;}
}

п/с в ставил в style.css в самом начале

не зависимо есть ли это в стиля или нет - ничего не меняется

реакция есть только на

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

не могу понять почему

D.iK.iJ
На сайте с 26.05.2013
Offline
225
D.iK.iJ
#8

Потому что

Ну и дальше тыкайте правой кнопкой => Просмотреть код или по [F12] и смотрите - что мешает сайту сжиматься. Советую сразу глянуть боди - минимальная ширина вдруг есть. И убрать отступы и float у колонки и контента.

А эти стили без мета тега работать не будут точно.

И это все легко смотреть в Хроме, просто уменьшив ширину окна браузера.

J
На сайте с 08.06.2006
Offline
844
joost
#9

DiKiJ, я немного сам запутался и наверное запутал Вас

1. убрал мета тег и стили - сайт как на ПК, только на смартфоне он очень мелкий

2. добавил мета тег и стили - все большое, больше чем надо

3. добавил только мета тег - все большое, больше чем надо

п.с. проверяю через личный телефон (Экран (4.5", TFT, 854x480))

основной контент

.one-column #content {
margin: 0 auto;
width: 640px;
}

колонка

.entry-content blockquote.right {
float: right;
margin-left: 24px;
margin-right: 0;
text-align: left;
width: 33%;
}



---------- Добавлено 22.09.2017 в 14:35 ----------

width: 640px; это не минимальная?

float: right;

margin-left: 24px;

float: right; убрать?

margin-left: 0px;

сейчас попробую

---------- Добавлено 22.09.2017 в 14:46 ----------

попробовал - ничего

ф12->моб. режим и реальный просмотр на телефоне - две разных мира

D.iK.iJ
На сайте с 26.05.2013
Offline
225
D.iK.iJ
#10
joost:
ф12->моб. режим и реальный просмотр на телефоне - две разных мира

Зато если просто уменьшить ширину окна браузера - будет 1 в 1 примерно.

В общем, лучше пришлите сразу адреса домена. Так просто не помогу.

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий