Облегченная версия сайта для мобильных устройств

12
BW
На сайте с 02.06.2012
Offline
34
2561

Всем доброго времени суток.

Решил сделать версию сайта для мобильных устройств. Для этого, расковырял какой-то мобильный шаблон, несколько доработал его, вроде выглядит неплохо с мобильника.

Однако столкнулся с проблемой. У меня получается два файла index.html (обычный и мобильный), и также два файла index.css

Знаю, что это всем ожно решить средствами PHP, но я в нем совершенно не разбираюсь, да и в html, в общем-то, нуб.

Можно ли как-то в index.html объединить обе версии, прописав правила, по которым та или иная версия показывается на разные устройства. Слышал, что это можно реализовать через user agent, но, честно говоря, слабо представляю, что это такое и с чего его едят.

Прошу извинить за сумбур и непрофессионализм, сильно не бейте. Очень надеюсь, что найдется добрый человек, который сможет мне все это на пальцах разъяснить. Заранее спасибо.

SeVlad
На сайте с 03.11.2008
Offline
1609
#1

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

Blog Webmaster:
Слышал, что это можно реализовать через user agent

Юзер агент - это всего лишь (один из) ПРИЗНАК(ов), по которому сервер (скрипт) принимает решение ЧТО ему отдать.

Делаю хорошие сайты хорошим людям. Предпочтение коммерческим направлениям. Связь со мной через http://wp.me/P3YHjQ-3.
BW
На сайте с 02.06.2012
Offline
34
#2

Спасибо! Поддомен или тем более подкаталог - не проблема! Как в этом случае поступить?

!B
На сайте с 16.08.2007
Offline
57
#3

определить на 100% откуда пользовтаель пришел вы не сможете

поэтому считаю вам будет удобно сделать 2 версии сайта на разных доменах (поддоменах) или в разных папках

при заходе с мобиьного на обычные страницы вашего сайта, добавить javascript который будет определять тип браузера пользователя и если вы считаете что это мобильное устройство - предлагайте пользователю переходить на мобильную версию,

причем если пользователь откажется - то больше не показывать этого приглашения

BW
На сайте с 02.06.2012
Offline
34
#4

ok, с этим понятно, сделаю папку /mobile, либо субдомен mobile.domen.ru

добавить javascript

куда именно? в index.html?

6666
На сайте с 10.01.2005
Offline
505
#5
Blog Webmaster:
два файла index.html (обычный и мобильный), и также два файла index.css

Ну блин. Переименуйте мобильный в index_mobila.php и соответственно поменяйте там, где то, что его отсылает. Или в папку. Или и то и другое.

---------- Добавлено 03.06.2012 в 10:43 ----------

Blog Webmaster:
куда именно? в index.html?

на те страницы, откуда нужно пересылать на мобильную версию..

Каждое мое сообщение проверила и одобрила Елена Летучая. (c) Для меня очень важно все что Вы говорите! (http://surrealism.ru/123.mp3) .
Sodi
На сайте с 30.04.2012
Offline
10
#6
!html.by:
определить на 100% откуда пользовтаель пришел вы не сможете
поэтому считаю вам будет удобно сделать 2 версии сайта на разных доменах (поддоменах) или в разных папках
при заходе с мобиьного на обычные страницы вашего сайта, добавить javascript который будет определять тип браузера пользователя и если вы считаете что это мобильное устройство - предлагайте пользователю переходить на мобильную версию,
причем если пользователь откажется - то больше не показывать этого приглашения

Не все мобильные бразуеры корректно работают с js. Лучше на сервере определять, с чего зашли.

BW
На сайте с 02.06.2012
Offline
34
#7

Всем привет,

Извиняюсь за ламерство, а можно меня просто "носом ткнуть" в кусок кода, который добавить в, допустим, index.html, чтобы у меня шел редирект на index_mobile.html

palladin_jedi
На сайте с 13.07.2010
Offline
71
#8
Blog Webmaster:
Извиняюсь за ламерство, а можно меня просто "носом ткнуть" в кусок кода, который добавить в, допустим, index.html, чтобы у меня шел редирект на index_mobile.html

Самый простой способ - проверить регуляркой user agent и редиректить.

$useragent=$_SERVER['HTTP_USER_AGENT'];

if(preg_match(‘/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i’,$useragent)||preg_match(‘/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i’,substr($useragent,0,4)))
{
header("Location: http://mobile.example.com/");
}

Можете повозиться с вариативным дизайном, тогда мобильная версия будет отображаться на том же адресе, что и основная.

Сайт о web-разработке и прочем (http://seazo.net)||Продвижение статьями под Google (http://short.seazo.net/ght4zf) Бесплатные консультации рефералам Sape (http://www.sape.ru/r.SWfwWOblBo.php) PHP и JS скрипты на заказ, создание сайтов с нуля и на CMS.
BW
На сайте с 02.06.2012
Offline
34
#9

palladin_jedi, Хм, спасибо большое, но насколько я понимаю, тут php? А у меня index.html, этот код в нем ведь не будет работать?

palladin_jedi
На сайте с 13.07.2010
Offline
71
#10
Blog Webmaster:
А у меня index.html, этот код в нем ведь не будет работать?

Зависит от настроек хостинга, насколько я знаю.

12

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