Oddzielna odmiana strony internetowej

Question

Chcę się upewnić, że chcę zoptymalizować i sprawić, aby moja strona była łatwa w utrzymaniu dla różnych wersji mojej witryny.

Mam kilka wersji mojej strony:

• iPhone/iPod/android etc ...
• iPad/tabletki etc ...
• inne małe urządzenia, takie jak stare clap telefon
• domyślnie

Używam serwera Ubuntu z MySQL 5, PHP 5 i Apache + Memcache.

Jaki byłby najlepszy sposób realizować moją stronę tak wszyscy używają tej samej funkcjonalności Base:

• PHP
• JS (za często)
• CSS (za często)
• etc ...?

dzięki

Answer 1

Uwaga: to rozwiązanie jest bardziej o wydajności niż szybko naprawić, a ja w końcu zrobić

zakładam od Twojego używasz memcache masz swoją zawartość z bazy danych MySQL, a następnie analizować je w PHP i zapisz do pamięci podręcznej i wyświetlić go.

Każda wersja ma inną domenę. iPhone/Android (i inny smartfon) będzie używał domeny m.domain.com, tablety (iPad, galaxy itp.) będą używać t.domain.com, wszystkie inne będą używać o.domain.com, a domyślne będą używać www.domain.com lub domain.com.

Wszystkie te subdomen mogą wskazywać ten sam folder (/var/www/ - domyślny). Co zrobi lewy, jak to nazwać.

Dodaj swoją .htaccess lub 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] 

Więc w pliku PHP można użyć $_GET['subdomain'] i zdecydować, co trzeba zrobić, aby wygenerować stronę. W ten sposób jest bardzo łatwy w utrzymaniu, masz 1 punkt wejścia i możesz ustawić reguły w PHP, aby pobrać informacje o tym, co musisz wyświetlić (zawartość będzie taka sama, tylko układ się zmieni).

Jedną z rzeczy, które polecam, będzie optymalizacja plików. Wersja mobilna Twojej witryny powinna być w jakikolwiek sposób powiązana (CSS, Images, JS). Nie chcesz, aby Twój użytkownik ładował duże pliki CSS, JS i obrazy z urządzenia mobilnego z wolną siecią. Chcesz zoptymalizować jak najwięcej wolniejszych urządzeń sieciowych. Innymi słowy, nie chcesz wyświetlać logo o wymiarach 300 x 200 na urządzeniu z klapką 176x220. Jednym ze sposobów będzie nazwa pliku na podstawie domeny są one w. Na przykład:

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

I w kodzie PHP można mieć logikę dynamicznie załadować JS, obrazy i pliki CSS. Pamiętaj, że im szybciej ładujesz witrynę mobilną, tym lepiej. Ważność jest ważna, ale twoi użytkownicy też. Jeśli masz powolną witrynę mobilną, będą oni wykazywać tendencję do tego, by nie odwiedzać Twojej witryny i iść gdzie indziej. Nie wszyscy korzystają z sieci 3G/4G lub WiFi na swoim telefonie. Zalecam również użycie kompresji wyjściowej (np. deflate), gdy chcesz uzyskać dostęp do swoich plików.

Poprawi to Twój czas ładowania, szczególnie w przypadku urządzeń mobilnych. Teraz, jeśli używasz pliku tego samego, załóżmy, że plik JavaScript do przesyłania wiadomości, nie chcesz go powielać, ani kopiować z nazwą. Zamiast tworzyć dodatkową logikę w swoim PHP, można utworzyć dowiązania symbolicznego takiego:

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

Dzięki takiemu rozwiązaniu, trzeba będzie przekierować do odpowiedniej strony w zależności od typu urządzenia, których używają. Nie chcesz, aby widok z klapką był wersją iPhone'a Twojej witryny. Oto kilka sztuczek, które możesz zrobić, aby to osiągnąć:

// 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(); 
} 

OR w..htaccess/apache config pod domyślnej witryny:

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... 

polecam spojrzeć na http://detectmobilebrowsers.com/ aby dowiedzieć się, co można wykorzystać do urządzeń mobilnych i można sprawdzić http://validator.w3.org/mobile/ się upewnić, że wszystko wygląda dobrze na swoim urządzeniu mobilnym.

Od popularnych plików PHP zalecam korzystanie z centralnego miejsca, określonej ścieżki, z której można korzystać, a świat zewnętrzny nie. Możesz umieścić cały ten kod we wspólnym folderze, w którym wszystkie strony mogą uzyskać dostęp do tych plików. Przykład:

/web/lib/

ten sposób, nikt, oprócz Ciebie, można uzyskać dostęp bezpośrednio pliki. W kodzie PHP można zrobić coś takiego (na przykład skrypt logowania):

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

Answer 2

Nie

kilka różnych sposobów, jednak najłatwiejsze do utrzymania jest użycie telefonu pierwszą strategię rozwoju. Oznacza to zapisanie css dla najmniejszego rozmiaru (przy użyciu mniejszych rozmiarów obrazów, o ile to możliwe), a to stanie się podstawą, a następnie za pomocą zapytań o media css3, zastąpi podstawowe css nowymi stylami.

Oczywiście IE będzie miał pewne problemy, więc użyj instrukcji warunkowej (lte ie8) po podstawowym arkuszu stylów (tak, aby nadpisał style bazowe), aby załadować css na biurko dla np.

Jeśli chodzi o JS, upewnij się, że witryna działa poprawnie z wyłączonym JS. Jedną z rad jest napisanie witryny całkowicie bez JavaScriptu, upewnij się, że działa, a następnie dodaj ją później, aby ulepszyć istniejącą funkcjonalność.

Co do głównej treści, zachowaj to samo, twój php nie musi być inny dla różnych urządzeń, niech css wykonają wszystkie ciężkie operacje podnoszenia.

Oto próbka tego, co może mieć

//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); 
} 
} 

Więc w tym przykładzie mam ustawienie szerokości podstawy 240 piks (zakładając, że najmniejszy ekran, który będzie używany jest 240 piks) i po to centered , a następnie nadpisuję to w zależności od rozmiaru okna do większej wartości. To samo dotyczy obrazu, domyślnie obsługuję najmniejszy obraz, a następnie skaluje go w zależności od rozmiaru okna.

Jest to przykład podejścia mobilnego, które wielu uważa za najlepszą praktykę podczas pracy z elastycznym projektem, ponieważ zmniejsza ilość obrazów tła, które telefon musi załadować.

przyjrzeć http://mediaqueri.es/ zobaczyć kilka przykładów odpowiadających wzorów

I szukać wokół więcej informacji, co ja tu tylko pod warunkiem, zarysowania powierzchni. Po wyszukaniu pierwszego responsywnego projektu mobilnego uzyskasz wiele informacji na ten temat.