我想确保我想优化和使我的网站非常容易维护我的网站的不同版本。
我的网站有几个版本:
- iphone/ipod/android等等…
- ipad平板电脑等…
- 其他小型设备，如旧手机 默认
我使用ubuntu服务器MySQL 5, PHP 5和Apache + Memcache。
如何实现我的网站，使他们都使用相同的基本功能:
- PHP
- JS(通用)
- CSS (for common)
- 等等…?
谢谢
注意:这个解决方案更多的是关于性能而不是快速修复，我终于完成了
我假设因为你正在使用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']并决定您需要做什么来生成您的页面。这样，它非常容易维护，你有一个入口点，你可以在PHP中设置规则来检索你需要显示的信息(内容将是相同的，只有布局会改变)。
我建议的一件事是优化你的文件。你的网站的移动版本应该以任何方式(CSS，图片，JS)更轻。你不希望用户从网络速度较慢的移动设备上加载大型CSS、JS和图像。您希望尽可能针对较慢的网络设备进行优化。换句话说，您不希望在176x220的翻盖手机设备上显示300x200的徽标。一种方法是根据文件所在的域来命名文件。例如:
- file.css (4k) file- m.s css (0.4k)
- logo.jpg (300px * 300px 15k logo-m.jpg (100px * 40px 2k)
这将改善你的加载时间，特别是对于移动设备。现在，如果您使用相同的文件，假设是用于提交新闻信件的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...
有几种不同的方法，但最容易维护的是使用移动优先的开发策略。这意味着编写最小尺寸的css(尽可能使用较小的图像尺寸)，这将成为基础，然后使用css3媒体查询，用新样式覆盖基础css。
当然IE会有一些问题，所以在基本样式表之后使用条件语句(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);
}
}
所以在这个例子中，我设置了240px的基本宽度(假设最小的屏幕是240px)并将其居中，然后根据窗口大小将其覆盖为更大的值。对于图像也是如此，默认情况下，我提供最小的图像，然后根据窗口大小进行缩放。
这是一个移动优先方法的例子，许多人认为这是响应式设计的最佳实践，因为它减少了手机必须加载的背景图像数量。
看看http://mediaqueri.es/，看看一些响应式设计的例子
并搜索更多的信息，我在这里提供的只是触及表面。搜索一下手机优先响应式设计，你会得到很多关于这个主题的信息。