php - matriz - Separar una versión diferente de un sitio web
imprimir matrices php (2)
Hay algunas maneras diferentes, sin embargo, lo más fácil de mantener es usar una primera estrategia de desarrollo móvil. Esto significa escribir el CSS para el tamaño más pequeño (usando tamaños de imagen más pequeños donde sea posible), y esto se convertirá en la base, luego usando las consultas de medios css3, anulará el CSS base con nuevos estilos.
Por supuesto, IE tendrá algunos problemas, así que use una sentencia condicional (lte ie8) después de la hoja de estilo base (para que sobrescriba los estilos base) para cargar el css del escritorio, por ejemplo.
En cuanto a JS, asegúrese de que el sitio puede funcionar bien con JS deshabilitado. Un pequeño consejo es escribir el sitio completamente sin javascript, asegúrese de que funcione y luego agréguelo para mejorar la funcionalidad existente.
Y en cuanto al contenido principal, mantenlo igual, tu php no necesita ser diferente para los diferentes dispositivos, deja que el CSS haga todo el trabajo pesado.
Aquí hay una muestra de lo que podrías tener
//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);
}
}
Entonces, en este ejemplo estoy estableciendo un ancho de base de 240px (suponiendo que la pantalla más pequeña que se usará es 240px) y que esté centrado, luego lo sobreescribo dependiendo del tamaño de la ventana a un valor mayor. Lo mismo ocurre con la imagen, de manera predeterminada sirvo la imagen más pequeña y luego la amplío dependiendo del tamaño de la ventana.
Este es un ejemplo de un enfoque móvil primero, que muchos consideran la mejor práctica cuando se trabaja con un diseño receptivo, ya que reduce la cantidad de imágenes de fondo que un teléfono tiene que cargar.
echa un vistazo a http://mediaqueri.es/ para ver algunos ejemplos de diseños receptivos
Y busque más información, lo que proporcioné aquí solo araña la superficie. Una búsqueda de un primer diseño receptivo para dispositivos móviles le brindará mucha información sobre este tema.
Quiero asegurarme de que quiero optimizar y hacer que mi sitio sea muy fácil de mantener para diferentes versiones de mi sitio.
Tengo pocas versiones de mi sitio:
- iphone / ipod / android etc ...
- ipad / tabletas, etc.
- otros dispositivos pequeños como el viejo teléfono clap
- defecto
Uso el servidor ubuntu con MySQL 5, PHP 5 y Apache + Memcache.
¿Cuál sería la mejor manera de implementar mi sitio para que todos utilicen la misma funcionalidad básica?
- PHP
- JS (por comun)
- CSS (para uso común)
- etc ...?
Gracias
Nota: esta solución es más sobre el rendimiento que la solución rápida y finalmente he terminado
Supongo que como está utilizando Memcache, obtiene su contenido de una base de datos MySQL, luego lo analiza en PHP y lo guarda en la caché y lo muestra.
Cada versión tendría un dominio diferente. iPhone / Android (y otro teléfono inteligente) usarán el dominio m.domain.com , las tabletas (iPad, galaxy, etc.) usarán t.domain.com , todas las demás usarán o.domain.com y las predeterminadas usarán www.domain.com o domain.com .
Todos estos subdominios pueden apuntar a la misma carpeta ( /var/www/ - la predeterminada). Lo que hará el truco es cómo lo llamas.
Agregue esta su .htaccess o apache config:
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]
Entonces, en su archivo PHP puede usar $_GET[''subdomain''] y decidir qué debe hacer para generar su página. De esta forma, es muy fácil de mantener, tienes 1 punto de entrada y puedes configurar reglas en PHP para recuperar información sobre lo que necesitas mostrar (el contenido será el mismo, solo cambiará el diseño).
Una cosa que recomiendo será optimizar tus archivos. La versión móvil de su sitio debe ser de alguna manera (CSS, Images, JS). No desea que su usuario cargue grandes CSS, JS e imágenes desde un dispositivo móvil con una red lenta. Desea optimizar tanto como sea posible para un dispositivo de red más lento. En otras palabras, no desea mostrar un logotipo de 300x200 en un dispositivo de teléfono plegable de 176x220. Una forma será nombrar su archivo según el dominio en el que se encuentren. Por ejemplo:
- file.css (4k) VS archivo-m.css (0.4k)
- logo.jpg (300px * 300px 15k) VS logo-m.jpg (100px * 40px 2k)
Y en su código PHP puede tener una lógica para cargar dinámicamente JS, imágenes y archivos CSS. Como recordatorio, mientras más rápido cargue su sitio móvil, mejor será. La capacidad de mantenimiento es importante, pero tus usuarios también lo son. Si tiene un sitio móvil lento, tenderá a no ir a su sitio e ir a otro lugar. No todo el mundo usa una red 3G / 4G o WiFi en su teléfono. Además, recomiendo usar compresión de salida (como deflate ) cuando desee acceder a sus archivos.
Esto mejorará su tiempo de carga, especialmente para los dispositivos móviles. Ahora, si usa el mismo archivo, digamos un archivo Javascript para enviar cartas informativas, no desea duplicarlo ni copiarlo con el nombre. En lugar de crear una lógica extra en su PHP, puede crear un enlace simbólico como este:
ln -s /var/www/js/file.js /var/www/js/file-m.js
Con esta solución, deberá redireccionar al sitio apropiado según el tipo de dispositivo que use. No desea que un teléfono plegable vea una versión de iPhone de su sitio. Aquí hay un par de trucos que puede hacer para lograr esto:
// 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();
}
O en la configuración de .htaccess / apache en el sitio predeterminado:
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...
Recomiendo ver http://detectmobilebrowsers.com/ para averiguar qué puede usar para los dispositivos móviles y puede consultar http://validator.w3.org/mobile/ para asegurarse de que todo se vea bien para su dispositivo móvil. .
A partir de los archivos PHP comunes, recomendaré usar un lugar de centralización, un camino específico que puede usar y el mundo exterior no. Puede poner todo este código en una carpeta común donde todos los sitios pueden acceder a estos archivos. Ejemplo:
/web/lib/
De esta forma, nadie, excepto usted, puede acceder directamente a sus archivos. En su código PHP, hará algo como (por ejemplo, el script de inicio de sesión):
<?php
define(''BASE_PATH'', ''/web/lib/'');
require(BASE_PATH . ''filex.php'');
// etc...