css - queries - Diseño receptivo: ¿Media Query no funciona en iPhone?
media query portrait only (3)
Intento crear una versión amigable para dispositivos móviles de mi sitio web, para hacer que mi sitio web responda a un tamaño de pantalla más pequeño y escala en consecuencia.
He creado algunas consultas de medios, que se comportan correctamente en un navegador al cambiar el tamaño en un escritorio.
En mi iPhone, safari solo reduce el tamaño del sitio web completo, pero aún mantiene la relación de aspecto del sitio de tamaño completo. ¿Cómo hago para que se observe la consulta de medios? ¿Me he perdido algo?
Aquí hay un enlace a una caja de arena que estoy tratando de hacer funcionar correctamente; cualquier ayuda o sugerencia es apreciada:
¿Tienes el meta para ver el puerto en tu html?
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Más información aquí: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/
Acabo de experimentar lo más extraño después de solucionar este mismo problema por un día. Algo para probar si todo lo demás falla ...
Mis páginas respondieron perfectamente en mi computadora portátil durante el desarrollo, pero no en mi iPhone, iPad o Samsung. Finalmente descubrí que tenía que poner una línea de comentarios después de la declaración DOCTYPE y antes de la declaración html lang, así:
<!DOCTYPE html>
<!-- This comment line needed for bootstrap to work on mobile devices -->
<html lang="en">
Finalmente, mis páginas respondieron en los dispositivos móviles. ¡Extraño!
Creo que encontrarás una advertencia en Chrome con; en lugar de, Esto debería funcionar bien:
<meta name="viewport" content="width=device-width, initial-scale=1">