Забыли пароль?
Запросите новый здесь.

Автор темы: Zaxap
ID темы: 1806
Информация:
Тема содержит 21 сообщения, была просмотрена 13833 раз.
Просмотр темы
PHP-Fusion Russia » Поддержка 7 версии » Темы оформления 7 версии
 Распечатать тему
Адаптация шаблона под телефон
Zaxap
Почему-то тема фиксируется в телефоне, хотя при уменьшении окна браузера все отображается более-менее, как я задумал...(ширина под телефон подстраивается и т.п.).
Вот такая вот проблема...стиля не хватает/неправильный стиль какой-то...но вот что не так- хз))
Изменил(а) Zaxap, 30.09.2013 13:03
Зло не дремлет, а я добрый...
 
jikaka
адаптивный дизайн нужен
браузер на компе и на телефоне немного разная вещь, ОС разные
 
Web
Polarfox
jikaka, браузер на компе и телефоне ничем не отличается для пользователя (а как софт да, разный конечно).
Даже тесты проходит наравне, ибо стандарт.

Но железо телефона слабей, экран физически (и по разрешению часто) меньше, потому лучше использовать спецтему под мобилки.

Ну или если сумеешь адаптивный, можно его конечно.
Всегда делайте backup перед изменениями | Указывайте свою версию в подписи/профиле. | Вся бесплатная тех. поддержка только на форуме
 
Zaxap
Ну я вот и не могу понять, как -_-
Стиль бы...читал я про все это, но того, как это все сделать, не нашел =(
Зло не дремлет, а я добрый...
 
Vova
Стиль бы...читал я про все это, но того, как это все сделать, не нашел =(


Плохо читал.

На твоем месте не задавал бы таких вопросов.

Зайшел в поисковик и ввел фразу "http_user_agent".

htaccess вариант.

Скачать исходники  Код
if ( $http_user_agent ~* (windows\smobile|windows\sce|iphone|ipod|midp|symbian|series\s60|s60|nokia|аndroid| blackberry) ){
 rewrite ^/(.*)$ /liteversion/$1 last;
 }




Простой вариант на php.

Загрузить источник  GeSHi: PHP
  1. $iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
  2. $android = strpos($_SERVER['HTTP_USER_AGENT'],"Android");
  3. $palmpre = strpos($_SERVER['HTTP_USER_AGENT'],"webOS");
  4. $berry = strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry");
  5. $ipod = strpos($_SERVER['HTTP_USER_AGENT'],"iPod");
  6. $mobile = strpos($_SERVER['HTTP_USER_AGENT'],"Mobile");
  7. $symb = strpos($_SERVER['HTTP_USER_AGENT'],"Symbian");
  8. $operam = strpos($_SERVER['HTTP_USER_AGENT'],"Opera M");
  9. $htc = strpos($_SERVER['HTTP_USER_AGENT'],"HTC_");
  10. $fennec = strpos($_SERVER['HTTP_USER_AGENT'],"Fennec/");
  11. $winphone = strpos($_SERVER['HTTP_USER_AGENT'],"WindowsPhone");
  12. $wp7 = strpos($_SERVER['HTTP_USER_AGENT'],"WP7");
  13. $wp8 = strpos($_SERVER['HTTP_USER_AGENT'],"WP8");
  14. if ($ipad || $iphone || $android || $palmpre || $ipod || $berry || $mobile || $symb || $operam || $htc || $fennec || $winphone || $wp7 || $wp8 === true) {
  15. код далее
  16. }
Добавлено за 0.031 секунд, используя GeSHi 1.0.8.10


Вот такая вот проблема...стиля не хватает/неправильный стиль какой-то...но вот что не так- хз))


Моб. браузер сам уменьшает текст, что было бы зрочно читать. И сам его форматирует.

Ну я вот и не могу понять, как -_-
Стиль бы...читал я про все это, но того, как это все сделать, не нашел =(


Загрузить источник  GeSHi: PHP
  1. if ($ipad || $iphone || $android || $palmpre || $ipod || $berry || $mobile || $symb || $operam || $htc || $fennec || $winphone || $wp7 || $wp8 === true) {
  2. include "header_mobile.php";
  3. }
Добавлено за 0.019 секунд, используя GeSHi 1.0.8.10


И делаеш другую темку под телефон.

Или создаеш глобальную переменную $ismobile и работаеш з движком. Убиреш лишнее через условие.

Оффтопик Если не знаеш лучше не берись!

 
Web
Rush
сейчас все вертится вокруг media queries и всяких foundation
 
Web
Vova
Rush написал:

сейчас все вертится вокруг media queries и всяких foundation


Слишал, но никогда не пробывал.
Изменил(а) Vova, 30.09.2013 15:16
 
Web
Rush
пробовал, приятного мало. хорошо что я не кодер, а программист
 
Web
Chief
Zaxap, если без адаптации шаблона, то в css легко добиться нужного отображения на любых разрешениях экрана, например:


Загрузить источник  GeSHi: CSS
  1. обычные стили
  2.  
  3. /* --- iPad Landscape and other --- */
  4. @media screen and (max-width: 1024px) {
  5. переопределяем нужные стили
  6. }
  7.  
  8. /* --- iPad Portrait and other --- */
  9. @media screen and (max-width: 880px) {
  10. переопределяем нужные стили
  11. }
  12.  
  13. /* --- Smartphones and small Tablet PCs --- */
  14. @media screen and (max-width : 620px) {
  15. переопределяем нужные стили
  16. }
  17.  
  18. /* --- Привет Retina --- */
  19. @media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  20. переопределяем нужные стили
  21. }
Добавлено за 0.002 секунд, используя GeSHi 1.0.8.10


Поковыряй для примера, простую, но очень гибкую темку для wp: elmastudio.de/en/themes/yoko/ как она выглядит на разрешениях от 320 до 1280px
У богатых людей — большая библиотека. У бедных людей — большой телевизор.
 
Polarfox
Chief, это не CSS3 точно?
Всегда делайте backup перед изменениями | Указывайте свою версию в подписи/профиле. | Вся бесплатная тех. поддержка только на форуме
 
Zaxap
Chief, да фак в том, что когда я 320px ширину даже ставлю - все одно на телефоне: фиксируется где-то на 980px...и где прокол - черт меня знает(((
Изменил(а) Zaxap, 01.10.2013 03:41
Зло не дремлет, а я добрый...
 
Chief
PolarFox, это CSS3, точно. Ослы меньше девятого в пролёте.

Zaxap, смарты обычно масштабируют, попробуй в head добавить
<meta content='width=device-width, initial-scale=1' name='viewport' />
У богатых людей — большая библиотека. У бедных людей — большой телевизор.
x1
 
Zaxap
Ок, попробуем!)
---
(Скрытый текст: Почти) то, что мне надо!!!! *O*
(Скрытый текст: Правда то, что оно просто увиличивает + подстраивает ширину - странно, ибо оно толком ширину ВСЕГО сайта не меняет, приближает и масштабирует, а вот при двойном щелчке оно расширяется на свои "980px", но оставляет фикс ширину...
Но грех придираться, раз Боги Форума, наконец, откликнулись в Вашем лице! ab
Спасибо большущее!!! Буду копать в отношение meta))
)

P.S. Скрытый текст боле не актуален, ибо все из-за ширины картинки. Все отлично работает!)

Вопрос: а его поддерживают все браузеры?)
Изменил(а) Zaxap, 01.10.2013 10:04
Зло не дремлет, а я добрый...
 
Chief
Поддерживают большинство, но опять же могут быть нюансы, нужно экспериментировать. Вплоть до такого:

Загрузить источник  GeSHi: HTML
  1. <meta content='minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no' name='viewport' />
  2. <meta content='yes' name='apple-mobile-web-app-capable' />
  3. <meta name='HandheldFriendly' content='true' />
  4. <meta name='MobileOptimized' content='width' />
  5.  
Добавлено за 0.002 секунд, используя GeSHi 1.0.8.10


Работает в симбе, зелёных бачкоидах, яблоках и даже древних винмобайлах. Можно в хедере проверять юзерагент и скармливать эти штуки мобильным девайсам.
У богатых людей — большая библиотека. У бедных людей — большой телевизор.
x1 x1
 
Zaxap
Спасибо огромное!!!))) Ну в Андройде, в стандартном браузере и мобайл опере, работаетad
Зло не дремлет, а я добрый...
 
jikaka
можно попробовать протестировать здесь:
http://mattkersle...esponsive/
x2
 
Web
Zaxap
Немного другой вопрос: А как сделать масштабируемым background??

Есть
Загрузить источник  GeSHi: CSS
  1. .nyandex-logo {
  2. background: url(images/K-On!_Logo.png) no-repeat center;
  3. width: 520px;
  4. height: 280px;
  5. margin: 0 auto;
  6. }
Добавлено за 0.002 секунд, используя GeSHi 1.0.8.10


Надо это как-то сделать масштабируемым по ширине экрана, но при этом фиксированным на 520px-280px.

Искал - не нашел нужного. background-size не идет...
Зло не дремлет, а я добрый...
 
Chief
Для маленьких разрешений отрисовать другие лого и менять их через @media screen and (max-width : #px)
У богатых людей — большая библиотека. У бедных людей — большой телевизор.
x1
 
Zaxap
Думал этого избежать, но...так и быть))
Зло не дремлет, а я добрый...
 
Chief
Я сомневаюсь что кто-то с сименса cl45 вдруг зайдёт взглянуть на твой няндекс, так что адаптивные стили можно и нужно использовать. (Скрытый текст: Только с умом!)

Альтернатив на самом деле только две, специальная мобильная тема, с графикой и версткой или же полностью мобильная версия сайта (Скрытый текст: которую нормально сделать и поддерживать — геморрой ещё тот, фактически второй дублированно-кастрированный движок)
У богатых людей — большая библиотека. У бедных людей — большой телевизор.
 

Поделиться этой темой
Социальные закладки: Vkontakte Odnoklassniki Mail.ru Facebook Google Tweet This
URL:
BBcode:
HTML:

Перейти на форум:
Похожие темы
Топ 5 пользователей форума
Zaxap Zaxap (1,090)   Vova Vova (877)   Pisatel Pisatel (678)   util util (666)   SchreiBear SchreiBear (625)