none
Como escalo mi página para que se ajuste a la resolución de un móvil. RRS feed

  • Pregunta

  • Tengo una página HTML con una resolución mínima de 320px x 480px, en la que hay solo un botón y una imagen, como hago para que ocupe la pantalla entera de un móvil sea cual sea la resolución de este, estando el alto del botón siempre igual 60px.

    Si la contestación te ha servido de ayuda márcala como respuesta. Si lo que publico no funciona, no tengo la culpa, SOY HUMANO, no una máquina. M-Registry Cleaner, el programa que he creado con ayuda del foro, ya se puede descargar desde mi página o sino realizar alguna que otra donación en mcaresoft.wordpress.com sería de agradecer.

    miércoles, 15 de julio de 2015 16:00

Respuestas

  • A ver si es esto lo que buscas:

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
    
        <style type="text/css">
        html, body{
            height: 100%;
            margin: 0;
        }
    
        #mainContent{
            height: 100%;
            width: 100%;
        }
    
        #oMainPage {
            width: 100%;
            height: 100%;
        }
    	#oImgAd {
    	    border-style: none;	   
    	    width: 100%;
    	}
    	#oNextAd {
    		border-style: none;	
    	    background-color: #E5761D;
    		font-weight: bold;
    		color: white;
    		font-size: 24px;
    		font-family: 'Verdana';
            ;
            bottom: 0;
    		width: 100%;
            height: 60px;
    
    	}
        </style>
       
    </head>
    <body>
        <form id="oMainPage"  runat="server" aria-checked="false" aria-expanded="true" aria-orientation="vertical" aria-pressed="undefined" translate="no">
        <div id="mainContent">
        
            <img ID="oImgAd" runat="server" ImageAlign="AbsMiddle"/>
        
            <button ID="oNextAd" runat="server" disabled="True">Next</button>
        
        </div>
        </form>
    
    </body>
    </html>


    Píldoras .NET
    Artículos, tutoriales y ejemplos de código .NET

    Píldoras JS
    Artículos, tutoriales y ejemplos de código JavaScript, HTML5, CSS3, ...

    • Marcado como respuesta LTNs viernes, 17 de julio de 2015 14:31
    miércoles, 15 de julio de 2015 19:09
  • Para quitar el espacio entre la imagen y el botón añádele display:blockal estilo de la imagen.

    	#oImgAd {
    	    border-style: none;	   
    	    width: 100%;
    	    height: calc(100% - 60px);
    	    display: block;
    	}
    ¿A qué te refieres con que se puede bajar la página?


    Píldoras .NET
    Artículos, tutoriales y ejemplos de código .NET

    Píldoras JS
    Artículos, tutoriales y ejemplos de código JavaScript, HTML5, CSS3, ...

    • Marcado como respuesta LTNs viernes, 17 de julio de 2015 14:31
    jueves, 16 de julio de 2015 20:28

Todas las respuestas

  • Hola LTNs,

    Entiendo que para ello la imagen que tienes la defines en la propiedad background-image de la etiqueta Body, ¿verdad?

    Puedes lograrlo con algo de CSS

    background- center;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;

    Si la solución propuesta atendió su consulta no olvide marcarla como respuesta.

    Willams Morales
    Arequipa - PERÚ

    miércoles, 15 de julio de 2015 16:20
  • Te equivocas la tengo directamente en una imagen, no como fondo que es lo que te entiendo, en cierto modo la imagen es la que se tiene que reescalar, pero el botón se tiene que hacer o más ancho o menos. Para que no entadamos la página debe hacer lo mismo que un Form con la propiedad Anchor.

    Te pongo el HTML que tengo:

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
    
        <style type="text/css">
            #oMainPage {
                width: 320px;
                height: 480px;
            }
    	#oImgAd {
    	    border-style: none;	   
    	    width: 320px;
                height: 420px; 
    	}
    	#oNextAd {
    		border-style: none;	
    	    	background-color: #E5761D;
    		font-weight: bold;
    		color: white;
    		font-size: 24px;
    		font-family: 'Verdana';
    		width: 320px;
                    height: 60px;
    
    	}
        </style>
       
    </head>
    <body style="width: 320px; height: 480px;">
        <form id="oMainPage"  runat="server" aria-checked="false" aria-expanded="true" aria-orientation="vertical" aria-pressed="undefined" translate="no">
        <div>
        
            <img ID="oImgAd" runat="server" ImageAlign="AbsMiddle"/>
        
            <button ID="oNextAd" runat="server" disabled="True">Next</button>
        
        </div>
        </form>
    
    </body>
    </html>
    He quitado los script para que se vea mejor.


    Si la contestación te ha servido de ayuda márcala como respuesta. Si lo que publico no funciona, no tengo la culpa, SOY HUMANO, no una máquina. M-Registry Cleaner, el programa que he creado con ayuda del foro, ya se puede descargar desde mi página o sino realizar alguna que otra donación en mcaresoft.wordpress.com sería de agradecer.


    • Editado LTNs miércoles, 15 de julio de 2015 16:49
    miércoles, 15 de julio de 2015 16:49
  • A ver si es esto lo que buscas:

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
    
        <style type="text/css">
        html, body{
            height: 100%;
            margin: 0;
        }
    
        #mainContent{
            height: 100%;
            width: 100%;
        }
    
        #oMainPage {
            width: 100%;
            height: 100%;
        }
    	#oImgAd {
    	    border-style: none;	   
    	    width: 100%;
    	}
    	#oNextAd {
    		border-style: none;	
    	    background-color: #E5761D;
    		font-weight: bold;
    		color: white;
    		font-size: 24px;
    		font-family: 'Verdana';
            ;
            bottom: 0;
    		width: 100%;
            height: 60px;
    
    	}
        </style>
       
    </head>
    <body>
        <form id="oMainPage"  runat="server" aria-checked="false" aria-expanded="true" aria-orientation="vertical" aria-pressed="undefined" translate="no">
        <div id="mainContent">
        
            <img ID="oImgAd" runat="server" ImageAlign="AbsMiddle"/>
        
            <button ID="oNextAd" runat="server" disabled="True">Next</button>
        
        </div>
        </form>
    
    </body>
    </html>


    Píldoras .NET
    Artículos, tutoriales y ejemplos de código .NET

    Píldoras JS
    Artículos, tutoriales y ejemplos de código JavaScript, HTML5, CSS3, ...

    • Marcado como respuesta LTNs viernes, 17 de julio de 2015 14:31
    miércoles, 15 de julio de 2015 19:09
  • hola

    no te animas a usar bootstrap?

    con este podrias desarrollar de forma responsiba basado en movile first

    bootstrap es css y javascript que define un diseño segun las dimensiones del dispositivo

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    miércoles, 15 de julio de 2015 20:11
  • Probaré Bootstrap en otro momento, a lo que voy, he usado el código que me ha puesto Asier y funciona perfecto, solo tuve que añadirle una cosa más, bueno en ese código tengo un problema y es que en la parte de abajo se muestra una linea blanca y en el móvil se puede bajar la página, como hago para quitarlo.

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
    
        <style type="text/css">
        html, body{
            height: 100%;
            margin: 0;
    	
    	overflow-y: hidden;
    	overflow-x: hidden;
        }
    
        #mainContent{
            height: 100%;
            width: 100%;
        }
    
        #oMainPage {
            width: 100%;
            height: 100%;
        }
    	#oImgAd {
    	    border-style: none;	   
    	    width: 100%;
    	    height: calc(100% - 60px); <!--Faltaba esto para que ocupe el vertical.-->
    	}
    	#oNextAd {
    		border-style: none;	
    	        background-color: #E5761D;
    		font-weight: bold;
    		color: white;
    		font-size: 24px;
    		font-family: 'Verdana';
    
            	bottom: 0;
    		width: 100%;
            	height: 60px;
    
    	}
        </style>
    
    <script  type="text/javascript">
            function btnEnabled() {
                var timeElapse = 5;
                var button = document.getElementById("oNextAd");
                updateButton();
    
                function updateButton() {
                    if (timeElapse > 0) {
                        button.value = timeElapse;
                        timeElapse--;
                        setTimeout(updateButton, 1000);
                    }
                    else {
                        button.value = "Next";
                        button.disabled = false;
                    }
                }
            }
    </script>
    
    <script type="text/javascript">
    
    
    var lastIndex = 0;
    			
    function rdmImg() {
    var theImage = document.getElementById("oImgAd");
    var imgDir = '/images/';
    var imgArray = new Array('1.png','2.png','3.png');
    var imgIndex = 0;
    				
    if(imgArray.length > 1) {
    while(imgIndex == lastIndex) {
    imgIndex = Math.floor(Math.random() * imgArray.length);
    }
    lastIndex = imgIndex;
    				
    var imgPath = imgDir + imgArray[imgIndex];
    					
    theImage.src = imgPath;
    theImage.alt = imgArray[imgIndex];
    }
    else {
    return false;
    }
    }		
    
    </script>   
    
    </head>
    
    <body>
        <form id="oMainPage"  runat="server" aria-checked="false" aria-expanded="true" aria-orientation="vertical" aria-pressed="undefined" translate="no">
        <div id="mainContent">
        
            <img ID="oImgAd" runat="server" ImageAlign="AbsMiddle"/>
        
            <button ID="oNextAd" runat="server" disabled="True">Next</button>
        
        </div>
        </form>
    
            <script type="text/javascript">
                rdmImg();
            </script>    
    
            <script type="text/javascript">
                btnEnabled();
            </script>
    
    </body>
    </html>


    Si la contestación te ha servido de ayuda márcala como respuesta. Si lo que publico no funciona, no tengo la culpa, SOY HUMANO, no una máquina. M-Registry Cleaner, el programa que he creado con ayuda del foro, ya se puede descargar desde mi página o sino realizar alguna que otra donación en mcaresoft.wordpress.com sería de agradecer.


    • Editado LTNs jueves, 16 de julio de 2015 10:20
    jueves, 16 de julio de 2015 10:20
  • Para quitar el espacio entre la imagen y el botón añádele display:blockal estilo de la imagen.

    	#oImgAd {
    	    border-style: none;	   
    	    width: 100%;
    	    height: calc(100% - 60px);
    	    display: block;
    	}
    ¿A qué te refieres con que se puede bajar la página?


    Píldoras .NET
    Artículos, tutoriales y ejemplos de código .NET

    Píldoras JS
    Artículos, tutoriales y ejemplos de código JavaScript, HTML5, CSS3, ...

    • Marcado como respuesta LTNs viernes, 17 de julio de 2015 14:31
    jueves, 16 de julio de 2015 20:28
  • Era un problema ajeno a la página.

    Si la contestación te ha servido de ayuda márcala como respuesta. Si lo que publico no funciona, no tengo la culpa, SOY HUMANO, no una máquina. M-Registry Cleaner, el programa que he creado con ayuda del foro, ya se puede descargar desde mi página o sino realizar alguna que otra donación en mcaresoft.wordpress.com sería de agradecer.

    viernes, 17 de julio de 2015 14:31