我想确保我想要优化并使我的网站很容易为我的网站的不同版本维护。
我的网站版本很少：
我使用带有MySQL 5，PHP 5和Apache + Memcache的ubuntu服务器。
实施我的网站的最佳方式是什么，所以他们都使用相同的基本功能：
感谢
答案 0 :(得分：37)
注意：这个解决方案更多的是关于性能而不是快速修复，我终于完成了
我假设你使用内存缓存，你从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徽标。一种方法是根据文件所在的域名命名文件。例如：
在您的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();
}
OR在默认站点下的.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...
答案 1 :(得分：6)
有几种不同的方法，但最容易维护的是使用移动优先开发策略。这意味着将css写入最小尺寸（尽可能使用较小的图像尺寸），这将成为基础，然后使用css3媒体查询，用新样式覆盖基本css。
当然IE会有一些问题，所以在基本样式表之后使用条件语句（lte ie8）（以便它覆盖基本样式）以加载桌面css for ie。
对于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);
}
}
所以在这个例子中，我设置的基本宽度为240px（假设将使用的最小屏幕是240px）并使其居中，然后根据窗口大小将其覆盖为更大的值。对于图像也是如此，默认情况下，我提供最小的图像，然后根据窗口大小进行缩放。
这是移动优先方法的一个示例，许多人认为这是使用响应式设计时的最佳做法，因为它减少了手机必须加载的背景图像数量。
查看http://mediaqueri.es/以查看响应式设计的一些示例
并且搜索更多信息，我在这里提供的内容只是划清界面。搜索移动优先响应式设计将为您提供有关此主题的大量信息。