{"id":994,"date":"2016-05-27T21:15:35","date_gmt":"2016-05-27T21:15:35","guid":{"rendered":"http:\/\/luisrodriguez.pe\/blog\/?p=994"},"modified":"2016-05-27T21:15:35","modified_gmt":"2016-05-27T21:15:35","slug":"obtener-el-ancho-y-el-alto-del-navegador-con-jquery","status":"publish","type":"post","link":"https:\/\/luisrodriguez.pe\/blog\/obtener-el-ancho-y-el-alto-del-navegador-con-jquery\/","title":{"rendered":"Obtener el ancho y el alto del navegador con jquery"},"content":{"rendered":"

\"how-to-find-browser-window-width-or-browser-window-height-jquery\"<\/a>Las tendencias en dise\u00f1o hace que cada vez los desarrolladores <\/strong>(nosotros) deben crear capas que ocupen el 100% del ancho y el 100% del alto que se te pude volver un drama pero en este articulo te ense\u00f1o lo facil que resulta hacer esto.<\/p>\n

Jquery sin duda alguna nos facilita la vida y esta vez con una 2 funciones basicas de dicha libreria nos brindara las la medida del alto y ancho del navegador .width()<\/a> y .height()<\/a>\u00a0 \u00a0 pero ahora de que sacamos el alto y el ancho? del document<\/strong> o window<\/strong>? \u00a0llego a este punto y \u00a0pueda que lo tengan claro pero quiero dejar esto claro para que no quede duda\u00a0alguna. document nos brindara la medida de todo el contenido del html entonces no es lo que necesitamos y window nos da la medida que tiene el navegador\/ browser y a fin de cuenta es toda la pantalla que muestra al abrir la pagina asi q esto si calza a nuestro requerimiento que tenemos.<\/p>\n

listo!! entonces obtenemos el alto y ancho del navegador<\/p>\n\n

width=<\/span>$(<\/span>window)<\/span>.width<\/span>(<\/span>)<\/span>;<\/span>\nheight=<\/span>$(<\/span>window)<\/span>.height<\/span>(<\/span>)<\/span>;<\/span><\/pre><\/td><\/tr><\/table><\/div>\n\n
ahora que hago?… ok ya tenemos el alto y ancho entonces asumimos que nuestra web tendra varias secciones para abajo y estaran en la etiqueta section<\/a>. las medidas que obtuvimos debemos darle al section<\/a>. ya teniendo en claro el caso crearemos una funcion que le de la medida al section.<\/p>\n\n
function<\/span> section(<\/span>)<\/span>\n{<\/span>\n    width=<\/span>$(<\/span>window)<\/span>.width<\/span>(<\/span>)<\/span>;<\/span>\n    height=<\/span>$(<\/span>window)<\/span>.height<\/span>(<\/span>)<\/span>;<\/span>\n    $(<\/span>"section"<\/span>)<\/span>.width<\/span>(<\/span>width)<\/span>.height<\/span>(<\/span>height)<\/span>;<\/span>\n}<\/span>\n$(<\/span>document)<\/span>.ready<\/span>(<\/span>function<\/span>(<\/span>)<\/span>{<\/span>\n    section(<\/span>)<\/span>;<\/span> \n}<\/span>)<\/span><\/pre><\/td><\/tr><\/table><\/div>\n\n
Con esto ya tienes todo listo para tener tu section con el alto y ancho del navegador Pero que sucede si comienzan a cambiar de tama\u00f1o? todo se veria mal y la solucion es simple pero eficaz.<\/p>\n\n
$(<\/span>window)<\/span>.resize<\/span>(<\/span>function<\/span>(<\/span>)<\/span>{<\/span>\n    section(<\/span>)<\/span>;<\/span> \n}<\/span>)<\/span><\/pre><\/td><\/tr><\/table><\/div>\n\n
Y es asi como tienes un codigo simple y limpio para tus desarrollos espero que te sirva este articulo.<\/p>\n","protected":false},"excerpt":{"rendered":"Las tendencias en dise\u00f1o hace que cada vez los desarrolladores (nosotros) deben crear capas que ocupen el 100% del ancho y el 100% del alto que se te pude volver un drama pero en este articulo te ense\u00f1o lo facil que resulta hacer esto. Jquery sin duda alguna nos facilita la vida y esta vez[…]","protected":false},"author":1,"featured_media":996,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,14],"tags":[64,120,17,118,117,119],"class_list":["post-994","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desarrollo-web","category-jquery","tag-desarrollo-web-2","tag-height","tag-jquery-2","tag-resize","tag-section","tag-width"],"yoast_head":"\nObtener el ancho y el alto del navegador con jquery<\/title>\n<meta name=\"description\" content=\"Las tendencias en dise\u00f1o hace que cada vez los desarrolladores deben crear capas que ocupen el 100% del ancho y el 100% del alto en este articulo te ense\u00f1o.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/luisrodriguez.pe\/blog\/obtener-el-ancho-y-el-alto-del-navegador-con-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Obtener el ancho y el alto del navegador con jquery\" \/>\n<meta property=\"og:description\" content=\"Las tendencias en dise\u00f1o hace que cada vez los desarrolladores deben crear capas que ocupen el 100% del ancho y el 100% del alto en este articulo te ense\u00f1o.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/luisrodriguez.pe\/blog\/obtener-el-ancho-y-el-alto-del-navegador-con-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Luis Rodriguez\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/luisrodriguez.pe\" \/>\n<meta property=\"article:published_time\" content=\"2016-05-27T21:15:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2016\/05\/jquery-logo.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1666\" \/>\n\t<meta property=\"og:image:height\" content=\"833\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Luis Rodriguez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@luizmirodriguez\" \/>\n<meta name=\"twitter:site\" content=\"@luizmirodriguez\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Luis Rodriguez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/obtener-el-ancho-y-el-alto-del-navegador-con-jquery\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/obtener-el-ancho-y-el-alto-del-navegador-con-jquery\/\"},\"author\":{\"name\":\"Luis Rodriguez\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c\"},\"headline\":\"Obtener el ancho y el alto del navegador con jquery\",\"datePublished\":\"2016-05-27T21:15:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/obtener-el-ancho-y-el-alto-del-navegador-con-jquery\/\"},\"wordCount\":290,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/obtener-el-ancho-y-el-alto-del-navegador-con-jquery\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2016\/05\/jquery-logo.png\",\"keywords\":[\"desarrollo web\",\"height\",\"jquery\",\"resize\",\"section\",\"width\"],\"articleSection\":[\"Desarrollo web\",\"Jquery\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/luisrodriguez.pe\/blog\/obtener-el-ancho-y-el-alto-del-navegador-con-jquery\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/obtener-el-ancho-y-el-alto-del-navegador-con-jquery\/\",\"url\":\"https:\/\/luisrodriguez.pe\/blog\/obtener-el-ancho-y-el-alto-del-navegador-con-jquery\/\",\"name\":\"Obtener el ancho y el alto del navegador con jquery\",\"isPartOf\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/obtener-el-ancho-y-el-alto-del-navegador-con-jquery\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/obtener-el-ancho-y-el-alto-del-navegador-con-jquery\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2016\/05\/jquery-logo.png\",\"datePublished\":\"2016-05-27T21:15:35+00:00\",\"author\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c\"},\"description\":\"Las tendencias en dise\u00f1o hace que cada vez los desarrolladores deben crear capas que ocupen el 100% del ancho y el 100% del alto en este articulo te ense\u00f1o.\",\"breadcrumb\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/obtener-el-ancho-y-el-alto-del-navegador-con-jquery\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/luisrodriguez.pe\/blog\/obtener-el-ancho-y-el-alto-del-navegador-con-jquery\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/obtener-el-ancho-y-el-alto-del-navegador-con-jquery\/#primaryimage\",\"url\":\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2016\/05\/jquery-logo.png\",\"contentUrl\":\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2016\/05\/jquery-logo.png\",\"width\":1666,\"height\":833},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/obtener-el-ancho-y-el-alto-del-navegador-con-jquery\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/luisrodriguez.pe\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Obtener el ancho y el alto del navegador con jquery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/#website\",\"url\":\"https:\/\/luisrodriguez.pe\/blog\/\",\"name\":\"Blog Luis Rodriguez\",\"description\":\"Analytics Developer\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/luisrodriguez.pe\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c\",\"name\":\"Luis Rodriguez\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g\",\"caption\":\"Luis Rodriguez\"},\"description\":\"Hola, Soy Luis Rodriguez, radico en Lima \u2013 Per\u00fa, formado en una carrera inform\u00e1tica, desempe\u00f1ando desde el 2007 como programador web y viendo proyectos desde Front End y Back End a lo que me perfile como Full Stack. Esta Experiencia junto a mi inter\u00e9s en la Anal\u00edtica Web me ayud\u00f3 mucho entender el funcionamiento interno de las herramientas de anal\u00edtica, con las que vengo trabajo activamente desde 2017. Linkedin\",\"sameAs\":[\"http:\/\/luisrodriguez.pe\"],\"url\":\"https:\/\/luisrodriguez.pe\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Obtener el ancho y el alto del navegador con jquery","description":"Las tendencias en dise\u00f1o hace que cada vez los desarrolladores deben crear capas que ocupen el 100% del ancho y el 100% del alto en este articulo te ense\u00f1o.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/luisrodriguez.pe\/blog\/obtener-el-ancho-y-el-alto-del-navegador-con-jquery\/","og_locale":"es_ES","og_type":"article","og_title":"Obtener el ancho y el alto del navegador con jquery","og_description":"Las tendencias en dise\u00f1o hace que cada vez los desarrolladores deben crear capas que ocupen el 100% del ancho y el 100% del alto en este articulo te ense\u00f1o.","og_url":"https:\/\/luisrodriguez.pe\/blog\/obtener-el-ancho-y-el-alto-del-navegador-con-jquery\/","og_site_name":"Blog Luis Rodriguez","article_publisher":"https:\/\/www.facebook.com\/luisrodriguez.pe","article_published_time":"2016-05-27T21:15:35+00:00","og_image":[{"width":1666,"height":833,"url":"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2016\/05\/jquery-logo.png","type":"image\/png"}],"author":"Luis Rodriguez","twitter_card":"summary_large_image","twitter_creator":"@luizmirodriguez","twitter_site":"@luizmirodriguez","twitter_misc":{"Escrito por":"Luis Rodriguez","Tiempo de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/luisrodriguez.pe\/blog\/obtener-el-ancho-y-el-alto-del-navegador-con-jquery\/#article","isPartOf":{"@id":"https:\/\/luisrodriguez.pe\/blog\/obtener-el-ancho-y-el-alto-del-navegador-con-jquery\/"},"author":{"name":"Luis Rodriguez","@id":"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c"},"headline":"Obtener el ancho y el alto del navegador con jquery","datePublished":"2016-05-27T21:15:35+00:00","mainEntityOfPage":{"@id":"https:\/\/luisrodriguez.pe\/blog\/obtener-el-ancho-y-el-alto-del-navegador-con-jquery\/"},"wordCount":290,"commentCount":0,"image":{"@id":"https:\/\/luisrodriguez.pe\/blog\/obtener-el-ancho-y-el-alto-del-navegador-con-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2016\/05\/jquery-logo.png","keywords":["desarrollo web","height","jquery","resize","section","width"],"articleSection":["Desarrollo web","Jquery"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/luisrodriguez.pe\/blog\/obtener-el-ancho-y-el-alto-del-navegador-con-jquery\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/luisrodriguez.pe\/blog\/obtener-el-ancho-y-el-alto-del-navegador-con-jquery\/","url":"https:\/\/luisrodriguez.pe\/blog\/obtener-el-ancho-y-el-alto-del-navegador-con-jquery\/","name":"Obtener el ancho y el alto del navegador con jquery","isPartOf":{"@id":"https:\/\/luisrodriguez.pe\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/luisrodriguez.pe\/blog\/obtener-el-ancho-y-el-alto-del-navegador-con-jquery\/#primaryimage"},"image":{"@id":"https:\/\/luisrodriguez.pe\/blog\/obtener-el-ancho-y-el-alto-del-navegador-con-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2016\/05\/jquery-logo.png","datePublished":"2016-05-27T21:15:35+00:00","author":{"@id":"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c"},"description":"Las tendencias en dise\u00f1o hace que cada vez los desarrolladores deben crear capas que ocupen el 100% del ancho y el 100% del alto en este articulo te ense\u00f1o.","breadcrumb":{"@id":"https:\/\/luisrodriguez.pe\/blog\/obtener-el-ancho-y-el-alto-del-navegador-con-jquery\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/luisrodriguez.pe\/blog\/obtener-el-ancho-y-el-alto-del-navegador-con-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/luisrodriguez.pe\/blog\/obtener-el-ancho-y-el-alto-del-navegador-con-jquery\/#primaryimage","url":"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2016\/05\/jquery-logo.png","contentUrl":"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2016\/05\/jquery-logo.png","width":1666,"height":833},{"@type":"BreadcrumbList","@id":"https:\/\/luisrodriguez.pe\/blog\/obtener-el-ancho-y-el-alto-del-navegador-con-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/luisrodriguez.pe\/blog\/"},{"@type":"ListItem","position":2,"name":"Obtener el ancho y el alto del navegador con jquery"}]},{"@type":"WebSite","@id":"https:\/\/luisrodriguez.pe\/blog\/#website","url":"https:\/\/luisrodriguez.pe\/blog\/","name":"Blog Luis Rodriguez","description":"Analytics Developer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/luisrodriguez.pe\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c","name":"Luis Rodriguez","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g","caption":"Luis Rodriguez"},"description":"Hola, Soy Luis Rodriguez, radico en Lima \u2013 Per\u00fa, formado en una carrera inform\u00e1tica, desempe\u00f1ando desde el 2007 como programador web y viendo proyectos desde Front End y Back End a lo que me perfile como Full Stack. Esta Experiencia junto a mi inter\u00e9s en la Anal\u00edtica Web me ayud\u00f3 mucho entender el funcionamiento interno de las herramientas de anal\u00edtica, con las que vengo trabajo activamente desde 2017. Linkedin","sameAs":["http:\/\/luisrodriguez.pe"],"url":"https:\/\/luisrodriguez.pe\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/posts\/994","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/comments?post=994"}],"version-history":[{"count":2,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/posts\/994\/revisions"}],"predecessor-version":[{"id":998,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/posts\/994\/revisions\/998"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/media\/996"}],"wp:attachment":[{"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/media?parent=994"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/categories?post=994"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/tags?post=994"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}