29

我想确保我想要优化并让我的网站非常容易维护，以适应我网站的不同版本。

我的网站有几个版本：

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

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

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

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

谢谢

4

2 回答 2

37

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

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

每个版本都有不同的域。iPhone/Android（和其他智能手机）将使用m.domain.com域，平板电脑（iPad、galaxy 等）将使用t.domain.com，所有其他人将使用o.domain.com并且默认将使用www.domain.comor 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 徽标。一种方法是根据文件所在的域命名您的文件。例如：

  • 文件.css (4k) VS文件-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...
于 2011-12-13T00:06:26.623 回答
6

有几种不同的方法，但最容易维护的是使用移动优先开发策略。这意味着将 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/看看一些响应式设计的例子

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

于 2011-12-12T14:24:04.987 回答