單獨的不同版本的網站

Question

我想確保我想優化並使我的網站很容易維護我的網站的不同版本。

我有我的網站的幾個版本：

• 的iPhone/iPod /安卓等...
• 的iPad /平板電腦等等......像老拍手機
• 其他小型設備
• 默認

我使用MySQL 5，PHP 5和Apache + Memcache的Ubuntu服務器。

什麼是執行我的網站，所以它們都使用相同的基本功能的最佳方式：

• PHP
• JS（共同）
• CSS（共同）
• 等...？

感謝

Answer 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，圖像，JS）。您不希望用戶從網絡速度較慢的移動設備加載大型CSS，JS和圖片。您希望儘可能優化較慢的網絡設備。換句話說，您不希望在176x220翻蓋手機設備上顯示300x200的徽標。一種方法是根據他們所在的域來命名文件。例如：

• 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代碼中，您將執行類似操作（例如登錄腳本）：

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

Answer 2

有幾種不同的方式，但最簡單的維護是使用手機第一的發展戰略。這意味着寫入最小尺寸的css（儘可能使用更小的圖像尺寸），並且這將成爲基礎，然後使用css3媒體查詢，用新樣式覆蓋基本css。

當然IE會有一些問題，所以在基本樣式表之後使用一個條件語句（lte ie8）（以便它覆蓋基本樣式）來爲ie加載桌面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); 
} 
} 

因此，在這個例子中，我設置的320x240像素（假設將要使用的最小屏幕是320x240像素）的基本寬度有它爲中心的樣本，那麼我會根據窗口大小將其覆蓋到更大的值。對於圖像也是如此，默認情況下我會提供最小的圖像，然後根據窗口大小進行縮放。

這是移動優先方法的一個例子，許多人認爲這是使用響應式設計時的最佳做法，因爲它減少了手機加載的背景圖像的數量。

看看http://mediaqueri.es/看到響應設計

的一些例子，搜索周圍的更多信息，我提供這裏只是皮毛。搜索移動第一響應式設計將爲您提供關於此主題的大量信息。