Я хочу, чтобы убедиться, что я хочу оптимизировать и сделать мой сайт очень простым в обслуживании для другой версии моего сайта.
У меня мало версий моего сайта:
Я использую сервер ubuntu с MySQL 5, PHP 5 и Apache + Memcache.
Что было бы лучшим способом реализовать мой сайт, чтобы все они использовали одну и ту же базовую функциональность:
благодаря
Примечание. Это решение больше касается производительности, чем быстрого исправления, и я, наконец, сделал
Я предполагаю, что, поскольку вы используете memcache, вы получаете свой контент из базы данных MySQL, затем анализируете его на PHP и сохраняете в кэше и отображаете его.
Каждая версия имела бы другой домен. iPhone / Android (и другой смартфон) будет использовать домен m.domain.com , планшеты (iPad, галактика и т. д.) будут использовать t.domain.com , все остальные будут использовать o.domain.com а по умолчанию будет использовать www.domain.com или domain.com .
Все эти поддомены могут указывать на одну и ту же папку ( /var/www/ – по умолчанию). Что будет трюк, как вы его называете.
Добавьте это .htaccess или apache config:
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 и изображения с мобильного устройства с медленной сетью. Вы хотите оптимизировать как можно больше для более медленного сетевого устройства. Другими словами, вы не хотите отображать логотип 300×200 на флип-телефон 176×220. Один из способов – назвать ваш файл на основе домена, в котором они находятся. Например:
И в вашем 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-коде вы будете делать что-то вроде (например, скрипта входа):
<?php define('BASE_PATH', '/web/lib/'); require(BASE_PATH . 'filex.php'); // etc...
Существует несколько разных способов, однако проще всего использовать мобильную первую стратегию развития. Это означает, что вы набираете 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/, чтобы увидеть некоторые примеры гибких конструкций
И искать вокруг для получения дополнительной информации, то, что я здесь предоставил, просто царапает поверхность. Поиск мобильного первого отзывчивого дизайна даст вам много информации по этому вопросу.