Как правильно прописать этот код?

Сообщение сайта

(Сообщение закроется через 3 секунды)

Здравствуйте, гость (

| Вход | Регистрация )

SEO форум MaulTalk.com > Веб-строительство > Программная часть

Как правильно прописать этот код?

Опции

Albi

Topic Starter сообщение

7.5.2015, 12:45; Ответить: Albi

Сообщение #1

Частый гость

Группа: User
Сообщений: 58
Регистрация: 4.2.2015
Поблагодарили: 0 раз
Репутация:

Нужно оптимизировать сайт под мобильные устройства, для этого нужно правильно задать ширину, на данный момент она слишком большая. Как правильно прописать ширину контента в pda версии на юкоз?

На данный момент вот так:

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

Как правильно должно быть прописано?

(то что советовал Junk в прошлом вопросе не подошло, есть ещё варианты?)

Ответить с цитированием данного сообщения

ShowPrint ShowPrint 7.5.2015, 13:06; Сообщений: 3412 Поблагодарили: 5 раз Репутация: 965 Просмотр профиля	7.5.2015, 13:06; Ответить: ShowPrint Сообщение #2
Топовый постер Группа: Active User Сообщений: 3412 Регистрация: 21.3.2015 Из: Москва Поблагодарили: 5 раз Репутация: 965	Albi, неправильно прописан мета-тег, должно быть <meta name='viewport' content='width=device-width, initial-scale=1> Не надо указывать ширину в пикселях!!! У Вас ошибка в понимании смысла: данный метатег обеспечивает правильное отображение на моб.устройствах при поворотах экрана, но не устанавливает ширину обображения контента. Ширина контента устанавливается стилями. Для получения универсального дизайна для любой ширины экрана лучше использовать "резиновый" дизайн, в котором ширина области не фиксирована, то есть (например) не width=960px, а width=80%. Ну или устанавливать разную фиксированную ширину для разных экранов с помощью стилевой конструкции @media screen

Albi Topic Starter AlbiTopic Starter 7.5.2015, 13:38; Сообщений: 58 Поблагодарили: 0 раз Репутация: 1 Просмотр профиля	Topic Starter 7.5.2015, 13:38; Ответить: Albi Сообщение #3
Частый гость Группа: User Сообщений: 58 Регистрация: 4.2.2015 Поблагодарили: 0 раз Репутация: 1	ShowPrint, стили нашла, а куда и как его правильно сюда вписать? /* General Style / td, body {font-family:Tahoma,Arial;font-size:18pt;} a:link,a:visited {text-decoration:underline; color:#4D6D91;} a:hover,a:active {text-decoration:underline; color:#000000;} form {padding:0px;margin:0px;} input,textarea,select {font-size:15pt;font-family:Tahoma,Arial;} / ------------- */

yury_mw

7.5.2015, 20:27; Ответить: yury_mw

Сообщение #4

Завсегдатай

Группа: User
Сообщений: 648
Регистрация: 13.5.2009
Поблагодарили: 0 раз
Репутация:

195

Albi,
для оптимизации сайта под мобильные устройства нужно не просто задать ширину контента, а написать правила оформления вашего сайта под экраны соответствующей ширины.
Например, у вас есть блок с контентом, который имеет фиксированную ширину (скажем 980px) и по этой причине он не помещается на мобилках с шириной экрана 480px.

Реализуется это с помощью т.н. медиа запросов (CSS media queries). Работают они почти во всех современных браузерах, за исключением Internet Explorer 8 и его более ранних версий.

Код страницы с медиа-запросами и стилями под разные размеры экрана выглядит примерно так:


<!doctype html>
<html>
<head>
  <title>A Responsive Layout</title>
  <link rel="stylesheet" href="style.css">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1"> 
<style>
#content{
  margin: 0 auto;
  width: 980px;
  height: 200px;
  background: #ccc;
}
/* для ширины экрана <= 980px */
@media screen and (max-width: 980px) {
  #content{
    width: 640px;
    background: #cfc;
  }
}
/* для ширины экрана <= 640px */
@media screen and (max-width: 640px) {
  #content{
    width: 480px;
    background: #ccf;
  }
}
/* для ширины экрана <= 480px */
@media screen and (max-width: 480px) {
  #content{
    width: 400px;
    background: #fcc;
  }
}
</style>
</head>
<body>
  <div id="content">
    Содержательная часть
  </div>
</body>
</html>

Примечание: для разных размеров экранов обычно приходится менять не один параметр оформления (ширину контента), но и многие другие, как-то расположение информационных и навигационных блоков, фоновых изображений, шрифтов и прочая. Здесь для примера меняется еще цвет фона блока content при изменении ширины окна.

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой

или обратитесь к любому из модераторов.

Сообщение отредактировал yury - 7.5.2015, 20:34

« Предыдущая тема · Программная часть · Следующая тема »

1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)

Пользователей: 0

Похожие темы

Тема	Ответов	Автор	Просмотров	Последний ответ
Арбитражники, как ведете учет расходов и доходов?	12	Boymaster	1923	Вчера, 21:03 автор: MisterBit
Как вывести деньги в Украине с заблокированного Юмани ?	29	freeax	4816	17.4.2024, 1:19 автор: sergio11
Как вы отдыхаете от работы за компом	148	adw-kupon.ru	19712	8.4.2024, 10:37 автор: Skyworker
Как вы бросили работу и перешли на заработок с сайтов?	18	uahomka	3108	5.4.2024, 5:53 автор: Skyworker
Как бездомные хранят деньги?	81	metvekot	13659	31.3.2024, 12:44 автор: Boymaster

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

Текстовая версия

Сейчас: 20.4.2024, 6:09

Дизайн