区分不同版本的网站答案

【问题标题】：Separate different version of a website区分不同版本的网站
【发布时间】：2012-01-14 02:09:13
【问题描述】：

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

我的网站有几个版本：

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

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

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

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

谢谢

【问题讨论】：

+1 好问题，我也有同样的情况，我也想知道答案。
注意：我不使用 memcache 但我使用相同版本的 MySQL 和 PHP

标签： php html mysql mobile adaptive-design

【解决方案1】：

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

我假设由于您使用的是 memcache，因此您从 MySQL 数据库中获取内容，然后在 PHP 中对其进行解析并将其保存到缓存中并显示它。

每个版本都有不同的域。 iPhone/Android（和其他智能手机）将使用m.domain.com 域，平板电脑（iPad、galaxy 等...）将使用t.domain.com，所有其他设备将使用o.domain.com，默认将使用www.domain.com 或@987654328 @。

所有这些子域都可以指向同一个文件夹（/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）。

这将缩短您的加载时间，特别是对于移动设备。现在，如果您使用 same 文件，比如说一个用于提交新闻信件的 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...

【讨论】：

感谢您的回答，我尝试了验证器并在 100 分中获得了 4 分：我有 3 个严重、6 个严重、3 个中等和 7 个低。其中之一是我的 css 文件（78kb），我也遇到了一些缓存问题。再次感谢
欢迎您，但本网站将帮助您改进您的移动版本。例如，旧设备可能无法识别 IFRAME 或 display:table-column-group，而只是从您的设备加载您的网站并查看它的运行情况（从您的提供商网络，而不是 WIFI）
@BookOfZeus 谢谢，我有一个共享主机，看起来它可以完美运行。我有一个问题：我应该为生成的内容做什么？我很少有动态文件和静态文件（纯 html 生成的页面）？
@BookOfZeus 我无法创建文件夹 /web/lib，我了解不公开代码的重要性，但我应该把它放在哪里？
@aki 用于生成的内容，我将使用 .htaccess，这样您就可以确定任何内容都会重定向到移动设备。从文件夹开始，执行以下命令：cd ; mkdir -p lib/ ; pwd ; 这将在您当前的用户文件夹中创建文件夹（因为您无权访问根共享主机）现在密码将输出您可以使用的文件夹，例如：@987654339 @

【解决方案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/ 以查看响应式设计的一些示例

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

【讨论】：