分离网站的不同版本

Question

我想确保我想要优化并使我的网站非常容易针对不同版本的网站进行维护。

我的网站有几个版本：

• iphone/ipod/android 等...
• ipad/平板电脑等...
• 其他小型设备，如旧的拍手电话
• 默认

我使用带有 MySQL 5、PHP 5 和 Apache + Memcache 的 ubuntu 服务器。

实现我的网站的最佳方法是什么，以便它们都使用相同的基本功能：

• PHP
• JS（通用）
• CSS（通用）
• 等...？

谢谢

Answer 1

注意：这个解决方案更多的是关于性能而不是快速修复，我终于完成了

我假设由于您正在使用 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 和图像。您希望尽可能针对速度较慢的网络设备进行优化。换句话说，您不想在 176x220 翻盖手机设备上显示 300x200 徽标。一种方法是根据文件所在的域来命名文件。例如：

• file.css (4k) VS file-m.css (0.4k)
• logo.jpg (300px * 300px 15k ) VS 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);
}
}

因此，在本示例中，我将基本宽度设置为 240 像素（假设将使用的最小屏幕为 240 像素）并将其居中，然后根据窗口大小将其覆盖为一个更大的值。图像也是如此，默认情况下我提供最小的图像，然后根据窗口大小将其放大。

这是移动优先方法的一个示例，许多人认为这是使用响应式设计时的最佳实践，因为它减少了手机必须加载的背景图像的数量。

看一下 http://mediaqueri.es/ 查看响应式设计的一些示例

并搜索更多信息，我在这里提供的只是划伤表面。搜索移动优先响应式设计将为您提供有关此主题的大量信息。