none
Ancho de pantalla de los móviles RRS feed

  • Pregunta

  • Hola:

    Quisiera saber cuál es el ancho de pantalla de los móviles.

    Yo hice

        <script>
            if (screen.width < 540) {
                document.getElementById("aproyectosvidasolidaria").href = 'Respequena/default.aspx?idioma=<%=IIf(Request.QueryString("idioma") IsNot Nothing, Request.QueryString("idioma"), 1)%>'
                document.getElementById("aocio").href = 'Respequena/default.aspx?idioma=<%=IIf(Request.QueryString("idioma") IsNot Nothing, Request.QueryString("idioma"), 1)%>'
            }
            else {
                document.getElementById("aproyectosvidasolidaria").href = 'default.aspx?idioma=<%=IIf(Request.QueryString("idioma") IsNot Nothing, Request.QueryString("idioma"), 1)%>'
                document.getElementById("aocio").href = 'default.aspx?idioma=<%=IIf(Request.QueryString("idioma") IsNot Nothing, Request.QueryString("idioma"), 1)%>'
            }
        </script>

    ¿Está bien 540?

    Muchas gracias.


    • Editado volar.2016 martes, 21 de julio de 2020 8:36
    martes, 21 de julio de 2020 8:35

Respuestas

  • Es más complicado de lo que parece. Échale un vistazo a este artículo:

    http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml

    donde te explica la diferencia entre width y device-width, que puede ser importante porque algunos móviles modernos tiene muchos pixels de resolución en la pantalla, pero presentan el contenido realizando un "escalado" para que no se vea diminuto, con lo que la resolución efectiva es menor que la real.

    • Marcado como respuesta volar.2016 jueves, 23 de julio de 2020 7:31
    martes, 21 de julio de 2020 10:35
  • Hola volar.2016,

    Gracias por levantar tu consulta en los foros de msdn. Una solución es simplemente usar Window Width de JQuery:

    $(window).width()


    Puedes rellenar eso en un campo oculto y obtenerlo del lado del servidor en FormCollection. También te podría interesar leer sobre viewport. "Los dispositivos con pantallas angostas (p.e. móviles) muestran la página en una ventana virtual o viewport, que es usualmente más ancho que la pantalla y la comprimen de manera que pueda verse completa. El usuario podrá recorrerla y hacer zoom para ver diferentes áreas de la página. Por ejemplo, si una pantalla móvil tiene un ancho 640px, las páginas pueden ser procesadas con un viewport de 980px, y después comprimidas para que entren en 640px. Esto se hace porque muchas páginas no están optimizadas para dispositivos móviles y se quiebran (o, al menos, se ven mal) cuando son procesadas a un ancho de viewport pequeño. El viewport virtual es una forma de resolver el problema de sitios no optimizados para móviles, logrando que se vean mejor".

     

    <meta name="viewport" content="initial-scale=1, maximum-scale=1">

    Saludos cordiales

    Gabriel Castro

     ____________________________ 

    Por favor recuerde "Marcar como respuesta" las respuestas que hayan resuelto su problema, es una forma común de reconocer a aquellos que han ayudado, y hace que sea más fácil para los otros visitantes encontrar la solución más tarde.  


    martes, 21 de julio de 2020 12:30
    Moderador
  • hola

    >>Quisiera saber cuál es el ancho de pantalla de los móviles.

    para eso se usan libreria cliente por lo general basadas en javascript

    No es eso que estas armando pero suena a un parche

    Se programa de forma responsiva, para eso existen framework visuales como ser bootstrap

    o quizas alguna tecnica como esta

    How To: Add Mobile Pages to Your ASP.NET Web Forms / MVC Application

    >>¿Está bien 540?

    no

    no puedes saber de forma fija un tamano de dispositivo

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    • Marcado como respuesta volar.2016 jueves, 23 de julio de 2020 7:34
    martes, 21 de julio de 2020 14:54

Todas las respuestas

  • Es más complicado de lo que parece. Échale un vistazo a este artículo:

    http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml

    donde te explica la diferencia entre width y device-width, que puede ser importante porque algunos móviles modernos tiene muchos pixels de resolución en la pantalla, pero presentan el contenido realizando un "escalado" para que no se vea diminuto, con lo que la resolución efectiva es menor que la real.

    • Marcado como respuesta volar.2016 jueves, 23 de julio de 2020 7:31
    martes, 21 de julio de 2020 10:35
  • Hola volar.2016,

    Gracias por levantar tu consulta en los foros de msdn. Una solución es simplemente usar Window Width de JQuery:

    $(window).width()


    Puedes rellenar eso en un campo oculto y obtenerlo del lado del servidor en FormCollection. También te podría interesar leer sobre viewport. "Los dispositivos con pantallas angostas (p.e. móviles) muestran la página en una ventana virtual o viewport, que es usualmente más ancho que la pantalla y la comprimen de manera que pueda verse completa. El usuario podrá recorrerla y hacer zoom para ver diferentes áreas de la página. Por ejemplo, si una pantalla móvil tiene un ancho 640px, las páginas pueden ser procesadas con un viewport de 980px, y después comprimidas para que entren en 640px. Esto se hace porque muchas páginas no están optimizadas para dispositivos móviles y se quiebran (o, al menos, se ven mal) cuando son procesadas a un ancho de viewport pequeño. El viewport virtual es una forma de resolver el problema de sitios no optimizados para móviles, logrando que se vean mejor".

     

    <meta name="viewport" content="initial-scale=1, maximum-scale=1">

    Saludos cordiales

    Gabriel Castro

     ____________________________ 

    Por favor recuerde "Marcar como respuesta" las respuestas que hayan resuelto su problema, es una forma común de reconocer a aquellos que han ayudado, y hace que sea más fácil para los otros visitantes encontrar la solución más tarde.  


    martes, 21 de julio de 2020 12:30
    Moderador
  • hola

    >>Quisiera saber cuál es el ancho de pantalla de los móviles.

    para eso se usan libreria cliente por lo general basadas en javascript

    No es eso que estas armando pero suena a un parche

    Se programa de forma responsiva, para eso existen framework visuales como ser bootstrap

    o quizas alguna tecnica como esta

    How To: Add Mobile Pages to Your ASP.NET Web Forms / MVC Application

    >>¿Está bien 540?

    no

    no puedes saber de forma fija un tamano de dispositivo

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    • Marcado como respuesta volar.2016 jueves, 23 de julio de 2020 7:34
    martes, 21 de julio de 2020 14:54
  • Hola nuevamente:

    ¿Y si el usuario se mete por una página de la aplicación que no sea la inicial? ¿Cómo controlo el ancho de la pantalla? ¿He de poner el script en todas las páginas?

    Muchas gracias.

    jueves, 23 de julio de 2020 8:36