Problema con CSS Responsive

Has probado a usar : http://quirktools.com/screenfly/

Saludos

Hola @mrhashman,

Todos los dispositivos debería de reaccionar igual para un breakpint especifico, pero no es así.

El Nexus 7 tiene unas cualidades muy diferente al Sansum galaxy, en estos casos lo que se suele hacer es elegir los media query fijándote en estos puntos:

• Que dispositivo utiliza mi publico?
(Esto si tienes usuario para medirlo)

• Elegir Media Querys intermedias que abarquen la mayor parte de los dispositivos.
  


• Utiliza un framework css como Bootstrap o Fundation, que seguramente ya han pensado en esto y lo tienen corregido.
  


• Utilizar javaScript para detectar el dispositivo y actuar dependiendo de este.
  

Diferencia de medida del viewport entre dispositivos:

Son algunas ideas de como resolver el problema, si tienes trafico de usuarios será más fácil, da soporte a los dispositivos más utilizados por tus usuario y listo.

Un saludo, espero te ayude en algo.

También puedes utilizar la detección del tamaño del screen mediante jquery y de esa forma realizar las acciones oportunas para un caso concreto :

var width = $(window).width(), height = $(window).height();
if ((width <= 1023) && (height >= 768)) {
alert('Tamaño Correcto');
} else {
alert('Tamaño Incorrecto');
}

Buenas,
gracias por contestar, me está siendo de ayuda.

El problema es que tiene que la maqueta no tiene que hacer Scroll (condición principal), y tiene mucho9 contenido. Al final lo he arreglado asi:

@ estilos generales
Y
@media screen and (device-width: 384px) and (-webkit-device-pixel-ratio: 2) {
body { font-size: 1em; }
}

La maqueta se ve bienen dispositivos antiguos 320x480, y con @mediaqueires y Pixel ratio cambio el valor del texto para que no desborde.

Es un rollo por que es muy dificil adaptar en una sola pantalla con la cantidad de disposivos que hay, y que se vea perfecto en todos, y ya no solo que no desborde, si no que tenga coherencia y las proporciones se mantengan.

Muchas gracias a todos de nuevo, me está siendo de mucha utilidad.
Os dejo unos enlaces que también me ha ayudado a comprender el tema:

Este primero a sido la clave:
http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html

Y además estos otros:
http://www.html5rocks.com/en/mobile/high-dpi/
http://developer.android.com/guide/webapps/targeting.html
http://emiliocobos.net/css-directiva-supports-viewport-document/

No se como será tu maquetación pero podrías poner un contenedor en posición relative , con un ancho a 100% y ponerlo con overflow:hidden; dentro poner otro contenedor con float:left y a 100% de ancho , de esta forma evitas el desbordamiento y si metes más texto , fotos , etc , va creciendo el alto del contenedor , progresivamente

<style>

#contenedor
{
position:relative;
width:100%;
min-height:250px;
margin:auto;
overflow:hidden;
}

#inside
{
float:left;
position:relative;
width:100%;
min-height:100px;
}
</style>

Saludos

no puedo overflow Hidden por que "peta" en android 2.1
:(

Tocan malabares con media queries

Android 2.1 Froyo ya es para dispositivos muy antiguos , deberías revisar mediante estadísticas si realmente entrán tantas personas como para realizar todas esas modificaciones , a día de hoy ya no se hacen webs pensando en internet explorer 6 por ejemplo o similar , lo mismo para el tema de esos dispositivos , no creo que entren muchos dispositivos con esas versiones , tal vez aun hay dipositivos con Gingerbread , pero no tantos con Froyo

Saludos

Android 2.3 también da problemas.
Trabajo con proyectos para latino america y paises emergentes y hay un amplio volumen de visitas en A 2.3 tmb.
:(
Si por mi fuera... jajajaja

SI te comprendo , lo único si tu problema es el desbordamiento y media queries te da problemas con estas versiones de android , prueba esto y me comentas :

<meta name="viewport" content="ancho a insertar" />

Saludos

<meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no"/>

Lo tengo en modo "automatico"

ya está solucionado gracias.