0

Tengo este código y el problema es que cuando quiere visualizarse en un dispositivo móvil no se vuelve responsive, sino que se ve toda completa y no responsiva. ¿Cómo sería una solución para que al entrar se pueda visualizar bien tanto del navegador como desde un dispositivo móvil?

<html>
<head>
<title>Nueva web</title>
<meta name='Description' content='Contenido'><meta name='Keywords' content='Contenido'>
</head><!--  -->
<FRAMESET rows='100%,*' FRAMEBORDER='0' FRAMEBORDER='0' BORDER=0 FRAMESPACING='0'>


<FRAME SRC='http://www.nuevaweb.com' NAME='top' BORDER=0 FRAMESPACING='0' FRAMEBORDER='0' NORESIZE SCROLLING='AUTO'>

<FRAME SRC='' NAME='bottom' BORDER=0 FRAMESPACING='0' FRAMEBORDER='0' NORESIZE SCROLLING='NO'>

<noframes>

<body bgcolor='#FFFFFF' text='#000000' link='#0000FF' vlink='#CC0000' alink='#00CC33'><font face='Verdana'><p>&nbsp;</p><p>&nbsp;</p>

<a href='http://www.nuevaweb.com'>http://www.nuevaweb.com</a><p>&nbsp;</p><p>&nbsp;</p></font></body></noframes>

</FRAMESET>

</html>
2
  • 2
    Dos comentarios: 1) El título parece no estar relacionado con el cuerpo de la pregunta; y 2) no deberías usar frameset ni frames porque son obsoletos y se han quitado del estándar web
    – Alvaro Montoro
    el 12 ene. 2017 a las 12:31
  • Gracias Álvaro. el 12 ene. 2017 a las 16:57

2 respuestas 2

1

¿Cómo sería una solución para que al entrar se pueda visualizar bien tanto del navegador como desde un dispositivo móvil?

No tiene que ver tanto con resoluciones en sí, si no en adaptar el contenido a éstas mediante CSS y/o JavaScript. Si quieres que tu web se vea bien en cualquier dispositivo/resolución, entonces estamos hablando de diseño responsivo o responsive design en inglés.

Antes, para solventar éste tipo de problemas lo que se hacía era crear dos versiones del tema: una para desktop y otra para móvil. Ésto no es eficiente, escribir código dos veces para un mismo propósito, además del hecho que la versión web no se ve bien en resoluciones medianas, hace que ésta práctica haya quedado obsoleta.

La solución a éste problema es el diseño responsivo con la llegada de media queries en CSS3. En pocas palabras, mediante media queries podemos especificar estilos solo para determinadas resoluciones en una misma hoja de estilos, haciendo que, cuando el viewport coincida con las media queries, se apliquen los estilos automáticamente.

Ejemplo

Supongamos tenemos un clásico sidebar en un dashboard que tiene un ancho de 250px. Cuando el ancho de la pantalla sea máximo 850px, queremos hacer que el sidebar sea de 70px de ancho. Redimensiona la pantalla para que veas como cambia el sidebar.

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  height: 100vh;
}

.container .sidebar {
  background-color: #34495e;
  flex: 0 0 250px;
  height: 100%;
  transition: all .23s cubic-bezier(0.39, 0.575, 0.565, 1);
}

.container .content {
  display: flex;
  flex: 1;
  flex-direction: column;
  height: 100%;
}

.container .content .top {
  background-color: #fff;
  flex: 0 0 50px;
}

.container .content .main {
  background-color: #F2F8FA;
  flex: 1;
}

@media screen and (max-width: 850px) {
  .container .sidebar {
    flex: 0 0 70px;
  }
}
<section class="container">
  <aside class="sidebar">
    
  </aside>
  <section class="content">
    <header class="top">
      
    </header>
    <article class="main">
     
    </article>
  </section>
</section>


Para concluir, te recomiendo encarecidamente no usar estándares obsoletos, como lo son frameset y frame. Frameset no tiene soporte en HTML5 por lo que su uso es totalmente no recomendado. Si quieres insertar contenido remoto, usa iframe o mejor aún, object.

2
  • Muchas gracias guzgarzia. el 12 ene. 2017 a las 16:51
  • De nada, @KikeAlgarra. Recuerda marcar la respuesta que consideres correcta. Un saludo.
    – gugadev
    el 12 ene. 2017 a las 16:56
0

¿Por qué no quieres que se redireccione? Me explico, si tienes 2 versiones distintas para cada plataforma pon una por defecto y redirecciona en función de la resolución del dispositivo. Por otra parte si lo que quieres es "redireccionar" sin cambiar la url deberías hacer una llamada asíncrona (ajax) y modificar todo el cuerpo de la web. De todas formas te recomiendo que para hacer la web responsive sin comerte demasiado la cabeza utilices bootstrap.

1
  • Gracias vicent. el 12 ene. 2017 a las 16:57

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.