Отдельная другая версия сайта - PullRequest
29 голосов
/ 06 декабря 2011

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

У меня есть несколько версий моего сайта:

  • iphone / ipod / android и т. д. *
  • ipad / планшеты и т. д.* Я использую сервер Ubuntu с MySQL 5, PHP 5 и Apache + Memcache.

    Как лучше всего реализовать мой сайт, чтобы они все использовали одинаковую базовую функциональность:

    • PHP
    • JS (для обычных пользователей)
    • CSS (для обычных пользователей)
    • и т. Д. ...?

    спасибо

Ответы [ 2 ]

37 голосов
/ 13 декабря 2011

Примечание: это решение больше связано с производительностью, чем с быстрым исправлением, и я наконец-то закончил

Я предполагаю, что поскольку вы используете memcache, вы получаете контент из базы данных MySQL, затем анализируете его в PHP, сохраняете в кеш и выводите на экран.

У каждой версии будет свой домен. iPhone / Android (и другие смартфоны) будут использовать домен m.domain.com, планшеты (iPad, galaxy и т. д.) будут использовать t.domain.com, все остальные будут использовать o.domain.com, а по умолчанию будет использоваться www.domain.com или domain.com.

Все эти субдомены могут указывать на одну и ту же папку (/var/www/ - папка по умолчанию). Что подействует, так это то, как вы это называете.

Добавьте эту конфигурацию .htaccess или apache:

SetEnvIf Host ^www\. page=www
SetEnvIf Host ^o\. page=others
SetEnvIf Host ^m\. page=mobile
SetEnvIf Host ^t\. page=tablets
rewriterule ^.*$ index.php?subdomain=%{ENV:page} [QSA,L]

Таким образом, в вашем PHP-файле вы можете использовать $_GET['subdomain'] и решить, что вам нужно сделать, чтобы сгенерировать вашу страницу. Таким образом, его очень легко поддерживать, у вас есть 1 точка входа, и вы можете настроить правила в PHP для получения информации о том, что вам нужно отображать (содержимое будет таким же, изменится только макет).

Я рекомендую оптимизировать ваши файлы. Мобильная версия вашего сайта должна быть легче (CSS, Images, JS). Вы не хотите, чтобы ваш пользователь загружал большие CSS, JS и изображения с мобильного устройства с медленной сетью. Вы хотите максимально оптимизировать работу медленного сетевого устройства. Другими словами, вы не хотите отображать логотип 300x200 на флип-телефоне 176x220. Одним из способов будет назвать ваш файл в зависимости от домена, в котором он находится. Например:

  • file.css (4k) V.S. file-m.css (0.4k)
  • logo.jpg (300px * 300px 15k) V.S. logo-m.jpg (100px * 40px 2k)

И в вашем PHP-коде вы можете иметь логику для динамической загрузки файлов JS, Images и CSS. Как вы помните, чем быстрее вы загружаете свой мобильный сайт, тем лучше. Поддержка важна, но ваши пользователи тоже. Если у вас медленный мобильный сайт, они будут склонны не заходить на ваш сайт и уходить куда-то еще. Не все используют сеть 3G / 4G или WiFi на своем телефоне. Кроме того, я рекомендую использовать выходное сжатие (например, deflate ), когда вы хотите получить доступ к своим файлам.

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

ln -s /var/www/js/file.js /var/www/js/file-m.js

С этим решением вам нужно будет перенаправить на соответствующий сайт в зависимости от типа устройства, которое они используют. Вам не нужен флип-телефон для просмотра iPhone версии вашего сайта. Вот пара трюков, которые вы можете сделать, чтобы сделать это:

// PHP version - also make sure the current domain is checked otherwise you will be in an infinite loop!
if(strpos($_SERVER['HTTP_USER_AGENT'],'iPhone') !== FALSE || strpos($_SERVER['HTTP_USER_AGENT'],'Android') !== FALSE)
{
  header('Location: http://m.domain.com/');
  exit();
}

ИЛИ в конфигурации .htaccess / apache на сайте по умолчанию:

RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} "iphone|android" [NC]
RewriteCond %{HTTP_HOST} !^mobile.domain.com
RewriteRule ^(.*)$ http://m.domain.com/ [L,R=301] # or 302 if you want temporary
# etc...

Я рекомендую посмотреть http://detectmobilebrowsers.com/, чтобы узнать, что вы можете использовать для мобильных устройств, и вы можете проверить http://validator.w3.org/mobile/, чтобы убедиться, что все выглядит хорошо для вашего мобильного устройства.

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

/web/lib/

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

<?php
 define('BASE_PATH', '/web/lib/');
 require(BASE_PATH . 'filex.php');
 // etc...
6 голосов
/ 12 декабря 2011

Существует несколько различных способов, однако самый простой в использовании - это использовать стратегию мобильной разработки в первую очередь.Это означает запись css для наименьшего размера (с использованием меньших размеров изображения, где это возможно), и он станет базовым, затем с использованием медиазапросов css3 переопределит базовый css новыми стилями.

Конечно, IE будет иметьнекоторые проблемы, поэтому используйте условный оператор (lte ie8) после базовой таблицы стилей (чтобы она перезаписывала базовые стили), чтобы загрузить css для рабочего стола для ie.

Что касается JS, убедитесь, что сайт может работатьхорошо с отключенным JS.Один совет - написать сайт полностью без javascript, убедиться, что он работает, а затем добавить его для улучшения существующей функциональности.

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

Вот пример того, что у вас может быть

//Your Base CSS (no background images here)
.content{
  width:240px;
  margin:0px auto;
}
.logo{
  background-image:url(../logosmall.png);
}
// Smartphones (portrait and landscape)
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
// Styles
}

// Smartphones (landscape)
@media only screen 
and (min-width : 321px) {
// Styles
}

// Smartphones (portrait)
@media only screen 
and (max-width : 320px) {
// Styles
}

// iPhone 4
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
// Styles
}

// iPads (portrait and landscape)
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
// Styles    
.content{
  width:768px;
}
.logo{
  background-image{url(../logomedium.png);
}

// iPads (landscape)
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
// Styles
}

// iPads (portrait)
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
// Styles 
}

// Desktops and laptops
@media only screen 
and (min-width : 1024px) {
// Styles
.content{
  width:1024px;
}
.logo{
  background-image:url(../logolarge.png);
}
}

Так что в этом примереЯ устанавливаю базовую ширину 240 пикселей (при условии, что самый маленький экран, который будет использоваться, составляет 240 пикселей) и центрирую ее, а затем перезаписываю это в зависимости от размера окна на большее значение.То же самое касается изображения, по умолчанию я обслуживаю самое маленькое изображение, а затем увеличиваю его в зависимости от размера окна.

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

взгляните на http://mediaqueri.es/, чтобы увидеть некоторые примеры адаптивных конструкций

И ищите больше информации, которую я здесь предоставил, только царапает поверхность.Поиск мобильного адаптивного дизайна позволит вам получить много информации на эту тему.

...