0

On a number of good websites, I see that the page loads so that the content is the same width as the browser. Specifically on iPad: If you rotate the screen after page load, and zoom out, the content seems to resize in width to match the screen width again. What is the "trick" to achieve this? I don't want to use the "width:100%" technique, because I would still like the page to be able to "zoom in", where you then you have to pan/scroll to see the rest of the content.

Rowan Gontier
  • 821
  • 9
  • 14
  • 1vw = 1% of viewport width 1vh = 1% of viewport height 1vmin = 1vw or 1vh, whichever is smaller 1vmax = 1vw or 1vh, whichever is larger – Naresh Aug 31 '16 at 17:55
  • also you can use em & rem based on your need. see the example here http://webdesign.tutsplus.com/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984 – Naresh Aug 31 '16 at 17:58
  • Thank you for your comments. Much appreciated. – Rowan Gontier Aug 31 '16 at 18:09

2 Answers2

0

Sites like what you are describing are NOT using fixed widths, so setting a width on your elements will not let them to fill the entire screen.

If you want to create flexible and fluid layouts, you DON'T want to do this in your CSS:

.yourcontent {
  width: 55px;
}

You would want to create your elements with percentage based layouts, or viewport based layouts.

You can play around all day trying to get a fixed width to look just right, but if you change your browser, you of course don't get any responsiveness. Using something like:

.yourcontent {
   width: 50%;
}

will set to only use 50% of the screen width, no matter the browser sizing.

Using VH and VW (viewport height, viewport width) are preferable to using the fixed widths. Fixed widths can be changed depending on screen sizes using media queries, but this is essentially a waste of time and bootstrap will take care of (most) media queries for you.

example:

.yourcontent {
   width: 50vw;
}

Check out the bootstrap documentation of the CSS to see how this is achieved: http://getbootstrap.com/css/

You can still zoom in using a library like bootstrap.

john_h
  • 149
  • 1
  • 18
  • Thank you for your answer. The site that I like is: www.bdlive.co.za. You will see that they don't seem to use % values, yet whenever you zoom out completely, the content width is the same as the screen width. However, you can still zoom in if you like. – Rowan Gontier Aug 31 '16 at 18:11
  • If you take a look at their CSS source, you will see that they are setting fixed widths on elements, so if you are viewing this on a desktop or laptop, try re-sizing the browser and you'll notice that the site is not mobile friendly. The CSS for their mobile site is definitely different. Compare the site on your phone and on a laptop to see what I'm talking about. For the mobile version, they are definitely using fluid containers, as there is no other way to achieve that functionality. – john_h Sep 01 '16 at 12:28
  • Yes, I agree about their different settings. I actually found their site to work quite well, on desktop/tablet/smartphone. Thanks anyhow. – Rowan Gontier Sep 01 '16 at 12:39
0

I found a solution to my problem. I know its probably not A+ practice, but it seems to work. I basically use fixed widths for elements in the roughly "desktop/tablet" size mode, but I set the width using jquery on (page load/screen rotate), like this: $("myselector").width(newSizeWidth); where the width is based on: $(window).width(); However, I do use % layouts for roughly smartphone screen sizes, in the same webpage. I conditionally .show() the smartphone div's (that use % layouts), and then I hide the "desktop/tablet" div's (that use fixed sizes). I use the following in the Head portion for mobile devices: meta name="viewport" content="width=device-width, initial-scale=1" BUT For smartphones with smaller screen sizes, where I don't want zoom function, I change it in the document ready function with: viewportmeta.content = 'width=device-width, initial-scale=1,user-scalable=no';

Rowan Gontier
  • 821
  • 9
  • 14