Отдельная версия веб-сайта

Ответ 1

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

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

Каждая версия будет иметь другой домен. iPhone/Android (и другой смартфон) будет использовать домен m.domain.com, планшеты (iPad, галактика и т.д.) будут использовать 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, изображений и файлов 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-коде вы будете делать что-то вроде (например, login script):

<?php
 define('BASE_PATH', '/web/lib/');
 require(BASE_PATH . 'filex.php');
 // etc...

Ответ 2

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

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

Что касается 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/, чтобы увидеть некоторые примеры гибких конструкций

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