Лишние блоки в адаптивном дизайне

K
На сайте с 10.01.2015
Offline
110
1078

Подскажите, можно ли как-то в адаптивной верстке меня блоки местами, добавлять различные возможности например для версии под планшеты и смартфоны. Также хотелось бы в мобильной версии полностью избавиться от плагина популярных записей.

Сейчас я скрываю лишнее с помощью style display none, но такое решение не лучшее, тк все эти элементы все-равно прогрузятся.

Движок вордпресс

ivan34502
На сайте с 20.07.2012
Offline
81
#1
Kepus:
Подскажите, можно ли как-то в адаптивной верстке меня блоки местами, добавлять различные возможности например для версии под планшеты и смартфоны. Также хотелось бы в мобильной версии полностью избавиться от плагина популярных записей.
Сейчас я скрываю лишнее с помощью style display none, но такое решение не лучшее, тк все эти элементы все-равно прогрузятся.
Движок вордпресс

Я так делал:

<!DOCTYPE html>

<html>
<head>
<title>foobar</title>
<style>
@media screen and (max-width:300px){
#parent{
display:flex;
flex-flow: column;
}
#a{order:2;}
#c{order:1;}
#b{order:3;}
}
</style>
</head>
<body>
<div id="parent">
<div id="a">one</div>
<div id="b">two</div>
<div id="c">three</div>
</div>
</body>
</html>

http://jsfiddle.net/devnull/qyroxexv/

K
На сайте с 10.01.2015
Offline
110
#2
ivan34502:
Я так делал:

<!DOCTYPE html>
<html>
<head>
<title>foobar</title>
<style>
@media screen and (max-width:300px){
#parent{
display:flex;
flex-flow: column;
}
#a{order:2;}
#c{order:1;}
#b{order:3;}
}
</style>
</head>
<body>
<div id="parent">
<div id="a">one</div>
<div id="b">two</div>
<div id="c">three</div>
</div>
</body>
</html>


http://jsfiddle.net/devnull/qyroxexv/

Спасибо, но flex портит все. У меня не просто обычный блоки, а уже сильно кастомизированные, поэтому данный вариант не подходит.

TF-Studio
На сайте с 17.08.2010
Offline
321
#3

на уровне php / движка определять устройства и грузить что вам надо

Всё ещё лучший способ заработка для белых сайтов: GoGetLinks (https://www.gogetlinks.net/?inv=fahbn8).
Ayavryk
На сайте с 11.10.2003
Offline
209
#4

Те блоки, которые не обязательно показывать можно подгружать через Ajax

TF-Studio:
на уровне php / движка определять устройства и грузить что вам надо

Плохой способ. Тип устройства не определяет ширину экрана даже на одном девайсе. Без js все равно не справиться.

Ну и опять же проблема с Гуглом - "устройство" у робота одно и то же. И ему вряд ли понравится большой hidden-блок

Тынгыр, мынгыр, комсомол (http://erum.ru). Ехари, ехари, (жалобно) аяврик. /народная тунгусская песня/
K
На сайте с 10.01.2015
Offline
110
#5
Ayavryk:
Те блоки, которые не обязательно показывать можно подгружать через Ajax

Плохой способ. Тип устройства не определяет ширину экрана даже на одном девайсе. Без js все равно не справиться.
Ну и опять же проблема с Гуглом - "устройство" у робота одно и то же. И ему вряд ли понравится большой hidden-блок

Можно пожалуйста конкретный пример?

K
На сайте с 10.01.2015
Offline
110
#6
slavik2504:
Могу посоветовать верстку средствами фреймворков (аля Bootstrap), а если ФВ по вашему ИМХО - это плохо, тогда смотрим в сторону медиа-запросов CSS, будет конечно геморнее, но эффект тот же :)

Как понять геморнее? Просто через display: none скрывать? Я сейчас так делаю)

---------- Добавлено 02.06.2015 в 18:44 ----------

Еще подскажите пожалуйста, можно ли как-то задать этот параметр для устройств с шириной экрана менее 400 пикселей?

<meta name="viewport" content="width=device-width, user-scalable=no">

SV
На сайте с 03.11.2008
Offline
1394
#7
Ayavryk:
Ну и опять же проблема с Гуглом - "устройство" у робота одно и то же. И ему вряд ли понравится большой hidden-блок

Гугл-то, оказывается, считает как раз наоборот. Или это переводчики всё напутали...

Делаю хорошие сайты хорошим людям. Предпочтение коммерческим направлениям. Топики помощи с ⓌordPress (https://searchengines.guru/ru/forum/1032910 ) и основы безопасности сайтов ( https://searchengines.guru/ru/forum/774117 ). *** Помощь\консультации в топиках форума - БЕСПЛАТНО. Платные услуги ( https://wp.me/P3YHjQ-3 ) - с бюджетом от 150$ ***
PN
На сайте с 22.08.2012
Offline
103
#8
SeVlad:
Гугл-то, оказывается, считает как раз наоборот. Или это переводчики всё напутали...

что вполне логично, т.к. контент никуда не должен деваться:)

Мой совет помог? Не скупись! Bitcoin 1Lseddet1o1B6odgXQHbGaWGwRkt1Db8Ef Ethereum 0x450f1a17461e25194B7F9226cDEe70173F39e1e1
SV
На сайте с 03.11.2008
Offline
1394
#9
proksey-net:
что вполне логично, т.к. контент никуда не должен деваться

1. Контент для мобильного и стационарного может быть разный. Или частично разный.

2. Речь не только о контенте, но и о способе его выдачи. Объёме и времени загрузки прежде всего. Всегда можно подгрузить аяксом или перейти на след страницу, если потребуется.

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