Перейти к содержимому

Сервис обмена электронных валют


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

#1 Albi

Albi
  • Пользователь
  • 59 сообщений
  • Репутация: 1
0

Отправлено 07 Май 2015 - 11:45

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

 

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

 

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

 

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

 

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

 


 

 

  • 0

#2 ShowPrint

ShowPrint
  • Пользователь PRO
  • 1 727 сообщений
  • Репутация: 408

Отправлено 07 Май 2015 - 12:06

@Albi, неправильно прописан мета-тег, должно быть 

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

Не надо указывать ширину в пикселях!!!

 

У Вас ошибка в понимании смысла: данный метатег обеспечивает правильное отображение на моб.устройствах при поворотах экрана, но не устанавливает ширину обображения контента.

Ширина контента устанавливается стилями. Для получения универсального дизайна для любой ширины экрана лучше использовать "резиновый" дизайн, в котором ширина области не фиксирована, то есть (например) не width=960px, а width=80%.

Ну или устанавливать разную фиксированную ширину для разных экранов с помощью стилевой конструкции @media screen


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#3 Albi

Albi
    Topic Starter
  • Пользователь
  • 59 сообщений
  • Репутация: 1

Отправлено 07 Май 2015 - 12:38

@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;}
/* ------------- */

  • 0

#4 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 07 Май 2015 - 19:27

@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 при изменении ширины окна.

Сообщение отредактировал yury: 07 Май 2015 - 19:34

  • 1


Оформление форума – IPBSkins.ru