{"id":1472,"date":"2024-08-02T06:45:08","date_gmt":"2024-08-02T04:45:08","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1472"},"modified":"2024-08-02T06:45:09","modified_gmt":"2024-08-02T04:45:09","slug":"02-diseno-web-responsive-el-viewport","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/css3\/css-responsive\/02-diseno-web-responsive-el-viewport\/","title":{"rendered":"02. Dise\u00f1o Web Responsive &#8211; El Viewport"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Qu\u00e9 es el Viewport?<\/h2>\n\n\n\n<p>El <strong>Viewport<\/strong> es el \u00e1rea visible del usuario de una p\u00e1gina web. La ventana gr\u00e1fica var\u00eda seg\u00fan el dispositivo y ser\u00e1 m\u00e1s peque\u00f1a en un tel\u00e9fono m\u00f3vil que en la pantalla de una computadora. Antes de las tabletas y los tel\u00e9fonos m\u00f3viles, las p\u00e1ginas web estaban dise\u00f1adas solo para pantallas de computadora, y era com\u00fan que las p\u00e1ginas web tuvieran un dise\u00f1o est\u00e1tico y un tama\u00f1o fijo. Luego, cuando comenzamos a navegar por Internet usando tabletas y tel\u00e9fonos m\u00f3viles, las p\u00e1ginas web de tama\u00f1o fijo eran demasiado grandes para caber en la ventana gr\u00e1fica. Para solucionar esto, los navegadores de esos dispositivos redujeron toda la p\u00e1gina web para que se ajustara a la pantalla.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\">Configuraci\u00f3n del Viewport<\/h2>\n\n\n\n<p><strong>HTML5<\/strong> introdujo un m\u00e9todo para permitir a los desarrolladores web tomar control acerca del <strong>Viewport<\/strong>, a trav\u00e9s de la etiqueta <strong><em>&lt;meta&gt;<\/em><\/strong>.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;meta&nbsp;name=\"viewport\"&nbsp;content=\"width=device-width, initial-scale=1.0\"&gt;<\/pre>\n\n\n\n<p>Esto le da al navegador instrucciones sobre c\u00f3mo controlar las dimensiones y la escala de la p\u00e1gina.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>La parte <strong><em>width=device-width<\/em><\/strong> establece el ancho de la p\u00e1gina para seguir el ancho de pantalla del dispositivo (que variar\u00e1 seg\u00fan el dispositivo).<\/li>\n\n\n\n<li>La parte <strong><em>initial-scale=1.0<\/em><\/strong> establece el nivel de zoom inicial cuando el navegador carga la p\u00e1gina por primera vez.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Ajustar el tama\u00f1o del contenido a la ventana gr\u00e1fica<\/h2>\n\n\n\n<p>Los usuarios est\u00e1n acostumbrados a desplazarse por los sitios web verticalmente en dispositivos m\u00f3viles y de escritorio, \u00a1pero no horizontalmente!.&nbsp;Por lo tanto, si el usuario se ve obligado a desplazarse horizontalmente o alejarse para ver toda la p\u00e1gina web, la experiencia del usuario ser\u00e1 deficiente.<\/p>\n\n\n\n<p>Algunas reglas adicionales a seguir:<\/p>\n\n\n\n<p><strong>1. NO usar elementos grandes de ancho fijo<\/strong>: por ejemplo, si una imagen se muestra con un ancho mayor que la ventana gr\u00e1fica, puedes hacer que la ventana gr\u00e1fica se desplace horizontalmente. Recuerda ajustar este contenido para que se ajuste al ancho de la ventana gr\u00e1fica.<\/p>\n\n\n\n<p>2. NO permitas que el contenido dependa de un ancho de ventana en particular para mostrarse bien: dado que las dimensiones de la pantalla y el ancho en p\u00edxeles <strong>CSS<\/strong> var\u00edan ampliamente entre dispositivos, el contenido no debe depender de un ancho de ventana en particular para mostrarse bien.<\/p>\n\n\n\n<p>3. Usa consultas de medios <strong>CSS<\/strong> para aplicar diferentes estilos para pantallas peque\u00f1as y grandes: establecer anchos <strong>CSS<\/strong> absolutos grandes para elementos de p\u00e1gina har\u00e1 que el elemento sea demasiado ancho para la ventana gr\u00e1fica en un dispositivo m\u00e1s peque\u00f1o. En su lugar, considera usar valores de ancho relativo, como ancho: 100%. Adem\u00e1s, ten cuidado al usar valores de posicionamiento absolutos grandes. Puedes hacer que el elemento quede fuera de la ventana gr\u00e1fica en dispositivos peque\u00f1os.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Qu\u00e9 es el Viewport? El Viewport es el \u00e1rea visible del usuario de una p\u00e1gina web. La ventana gr\u00e1fica var\u00eda [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1464,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1472","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"Qu\u00e9 es el Viewport? El Viewport es el \u00e1rea visible del usuario de una p\u00e1gina web. La ventana gr\u00e1fica var\u00eda [&hellip;]","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1472","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=1472"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1472\/revisions"}],"predecessor-version":[{"id":1474,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1472\/revisions\/1474"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1464"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1472"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}