How to auto adjust the div size for all mobile tablet display formats

Question

I have designed a page where four div tags are there in the page  If I test the page in mobile phone  5 inch  it fits the page perfectly  If I test the same page in tablet the page fits with in 30  of the screen  So how can I set the div size so that it will fit for all type of screens   Fiddle link  HTML      lt div class  bubble0  align  center  gt        lt h3 gt Three  Levels  lt  h3 gt      lt  div gt     lt div class  bubble   align  center  gt   lt  div gt  lt br  gt  lt br  gt     lt div class  bubble1  align  center  gt   lt  div gt  lt br  gt  lt br  gt     lt div class  bubble2  align  center  gt   lt  div gt  lt br  gt  lt br  gt     lt button gt Play lt  button gt    Any suggestions please

User · Answer

Simple    lt meta name  viewport  content  width device-width height device-height initial-scale 1 0      Cheers

User · Answer

This is called Responsive Web Development RWD   To make page responsive to all device we need to use some basic fundamental such as -  1  Set the viewport meta tag in head    lt meta name  viewport  content  width device-width height device-height initial-scale 1 0   gt    2 Use media queries   Example -     Smartphones  portrait and landscape  -----------     media only screen  and  min-device-width   320px   and  max-device-width   480px       Styles          Smartphones  landscape  -----------     media only screen  and  min-width   321px       Styles          Smartphones  portrait  -----------     media only screen  and  max-width   320px       Styles          iPads  portrait and landscape  -----------     media only screen  and  min-device-width   768px   and  max-device-width   1024px       Styles          iPads  landscape  -----------     media only screen  and  min-device-width   768px   and  max-device-width   1024px   and  orientation   landscape       Styles          iPads  portrait  -----------     media only screen  and  min-device-width   768px   and  max-device-width   1024px   and  orientation   portrait       Styles          Desktops and laptops -----------     media only screen  and  min-width   1224px       Styles          Large screens -----------     media only screen  and  min-width   1824px       Styles          iPhone 4 -----------     media only screen and  -webkit-min-device-pixel-ratio   1 5   only screen and  min-device-pixel-ratio   1 5       Styles        3  Or we can directly use RWD framework -   Bootstrap Foundation 3 etc    Some of good Article  Media Queries for Standard Devices - BY CHRIS COYIER  CSS Media Dimensions  4  Larger Device  Medium Devices  amp  Small Devices media queries   Work in my Scenarios    Below media queries for generic Device type  - Larger Device  Medium Devices  amp  Small Devices  This is just basic media types which work for all of scenario  amp  easy to handle code instead of using various media queries just need to care of three media type        Desktops  big landscape tablets and laptops Large  Extra large         media screen and  min-width  1024px     Style           Tablet medium        media screen and  min-width   768px  and  max-width   1023px     Style            Smartphones  portrait and landscape  small         media screen and  min-width   0px  and  max-width   767px     Style

User · Answer

You question is a bit unclear as to what you want  but judging from your comments  I assume you want each bubble to cover the screen  both vertically and horizontally  In that case  the vertical part is the tricky part   As many others have answered  you first need to make sure that you are setting the viewport meta tag to trigger mobile devices to use their  ideal  viewport instead of the emulated  desktop width  viewport  The easiest and most fool proof version of this tag is as follows    lt meta name  viewport  content  width device-width  initial-scale 1  gt    Source  PPK  probably the leading expert on how this stuff works   See http   quirksmode org presentations Spring2014 viewports jqueryeu pdf    Essentially  the above makes sure that media queries and CSS measurements correspond to the ideal display of a virtual  point  on any given device     instead of shrinking pages to work with non-optimized desktop layouts  You don t need to understand the details of it  but it s important   Now that we have a correct  non-faked  mobile viewport to work with  adjusting to the height of the viewport is still a tricky subject  Generally  web pages are fine to expand vertically  but not horizontally  So when you set height  100  on something  that measurement has to relate to something else  At the topmost level  this is the size of the HTML element  But when the HTML element is taller than the screen  and expands to contain the contents   your measurements in percentages will be screwed up   Enter the vh unit  it works like percentages  but works in relation to the viewport  not the containing block  MDN info page here  https   developer mozilla org en-US docs Web CSS length Viewport-percentage lengths  Using that unit works just like you d expect    bubble   height  100vh       be as tall as the viewport height  Done      It works on a lot of browsers  IE9 and up  modern Firefox  Safari  Chrome  Opera etc  but not all  support info here  http   caniuse com  search vh   The downside in the browsers where it does work is that there is a massive bug in iOS6-7 that makes this technique unusable for this very case  details here  https   github com scottjehl Device-Bugs issues 36   It will be fixed in iOS8 though   Depending on the HTML structure of your project  you may get away with using height  100  on each element that is supposed to be as tall as the screen  as long as the following conditions are met    The element is a direct child element of  lt body gt   Both the html and body elements have a 100  height set    I have used that technique in the past  but it was long ago and I m not sure it works on most mobile devices  Try it and see   The next choice is to use a JavaScript helper to resize your elements to fit the viewport  Either a polyfill fixing the vh issues or something else altogether  Sadly  not every layout is doable in CSS

User · Answer

You can use the viewport height  just set the height of your div to height 100vh   this will set the height of your div to the height of the viewport of the device  furthermore  if you want it to be exactly as your device screen  set the margin and padding to 0   Plus  It will be a good idea to set the viewport meta tag    lt meta name  viewport  content  width device-width height device-height initial-scale 1 0    gt   Please Note that this is relatively new and is not supported in IE8-  take a look at the support list before considering this approach  http   caniuse com  search viewport    Hope this helps

User · Answer

Whilst I was looking for my answer for the same question  I found this    lt img src  img png  style max- width 100  overflow hidden border none padding 0 margin 0 auto display block   marginheight  0  marginwidth  0  gt    You can use it inside a tag  iframe or img  the image will adjust based on it s device

User · Answer

I don t have much time and your jsfidle did not work right now  But maybe this will help you getting started   First of all you should avoid to put css in your html tags  Like align  center   Put stuff like that in your css since it is much clearer and won t deprecate that fast    If you want to design responsive layouts you should use media queries wich were introduced in css3 and are supported very well by now   Example css    media screen and  min-width  100px  and  max-width  199px         button               width  25px            media screen and  min-width  200px  and  max-width  299px         button               width  50px            You can use any css you want inside a media query   http   www w3 org TR css3-mediaqueries

User · Answer

Fiddle  You want to set height which may set for all devices   Decide upon the design of the site i e Height on various devices   Ex     Height-100px for bubbles on device with -min-width  700px  Height-50px for bubbles on device with  lt  700px    Have your css which has height 50px   and add this media query     media only screen and  min-width  700px           Styles         bubble           height  100px          margin  20px             bubble after           bottom  -50px          border-width  50px 50px 0             bubble before           top  100px          border-width  52px 52px 0             bubble1           height  100px          margin  20px             bubble1 after           bottom  -50px          border-width  50px 50px 0             bubble1 before           top  100px          border-width  52px 52px 0             bubble2           height  100px          margin  20px             bubble2 after           bottom  -50px          border-width  50px 50px 0             bubble2 before           top  100px          border-width  52px 52px 0            This will make your bubbles have Height of 100px on devices greater than 700px and a margin of 20px

User · Answer

I use something like this in my document ready  var height     window  height     gets height from device var width     window  width      gets width from device      container   width width  px        container   height height  px

User · Answer

Try giving your divs a width of 100

[html] How to auto adjust the div size for all mobile / tablet display formats?

Examples related to html

Examples related to css

Examples related to jquery-ui

Examples related to jquery-mobile