Отдельная другая версия веб-сайта
Я хочу убедиться, что я хочу оптимизировать и сделать свой сайт очень простым в обслуживании для разных версий моего сайта.
У меня есть несколько версий моего сайта:
- iphone/ipod/android и т.д...
- ipad/планшеты и т.д...
- другие небольшие устройства, такие как старый телефон clap
- по умолчанию
Я использую сервер ubuntu с MySQL 5, PHP 5 и Apache + Memcache.
Как лучше всего реализовать мой сайт, чтобы все они использовали одну и ту же базу функциональные возможности:
- PHP
- JS (для общего)
- CSS (для общего)
- и т.д....?
Спасибо
2 answers
Примечание: это решение больше касается производительности, чем быстрого исправления, и я, наконец, закончил
Я предполагаю, что, поскольку вы используете 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, изображения, JS). Вы не хотите, чтобы ваш пользователь загружал большие CSS, JS и изображения с мобильного устройства с медленной сетью. Вы хотите максимально оптимизировать работу для более медленного сетевого устройства. Другими словами, вы не хотите отображать логотип 300x200 на флип-телефоне 176x220. Одним из способов будет присвоение имени вашему файлу на основе домена, в котором он находится. Для пример:
- файл.css (4k) V.S. файл-м.css (0,4к)
- logo.jpg (300 пикселей *300 пикселей 15k) V.S. logo-m.jpg (100 пикселей *40 пикселей 2k)
И в вашем PHP-коде у вас может быть логика для динамической загрузки JS, изображений и CSS-файлов. Помните, чем быстрее вы загружаете свой мобильный сайт, тем он лучше. Удобство обслуживания важно, но и ваши пользователи тоже. Если у вас медленный мобильный сайт, они будут стремиться не заходить на ваш сайт, а перейти в другое место. Нет все используют сеть 3G/4G или Wi-Fi на своем телефоне. Кроме того, я рекомендую использовать сжатие вывода (например, выкачать), когда вы хотите получить доступ к своим файлам.
Это увеличит время загрузки, особенно для мобильных устройств. Теперь, если вы используете тот же файл , скажем, файл 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...
Существует несколько различных способов, однако самый простой в обслуживании - использовать стратегию разработки mobile first. Это означает написание 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);
}
}
Итак, в этом примере я установив базовую ширину 240px (при условии, что самый маленький экран, который будет использоваться, будет 240px) и установив его по центру, затем я перепишу это в зависимости от размера окна на большее значение. То же самое касается изображения, по умолчанию я показываю самое маленькое изображение, а затем увеличиваю его в зависимости от размера окна.
Это пример подхода, ориентированного на мобильные устройства, который многие считают лучшей практикой при работе с адаптивным дизайном, поскольку он уменьшает количество фоновых изображений на телефоне должен загружаться.
Взгляните на http://mediaqueri.es / чтобы увидеть некоторые примеры адаптивных дизайнов
И поищите дополнительную информацию, то, что я здесь предоставил, просто царапает поверхность. Поиск по первому адаптивному дизайну для мобильных устройств даст вам много информации по этому вопросу.