Change HTML element's width based on viewport size

Question

I've been tasked with making a web application more mobile-friendly. I'm running the app through PhoneGap to get the mobile build, but testing its appearance beforehand using the Ripple Emulator.

PhoneGap works pretty well on the app, but there's a kind of "control panel" whose width does not change, and it makes it so that this control panel takes up the majority of the width of the mobile view, which is no good.

So essentially, I need to edit the current JavaScript file so that it detects whether the viewer is a mobile device, and adjust the width of this control panel element accordingly. Unfortunately, I am basically brand new to all web development..

So as a general question, how would I go about doing this? I think I need to make these adjustments before the page is actually loaded, but I'm not sure of where in the JS file this would happen. The client is using JQuery Mobile and a few other libraries. The original developer is already using the

<meta name="viewport" content="width=device-width, initial-scale=1" />

tag, but it has no effect on this control panel section, and the width of the control panel's elements are hard-coded in.

This is a pretty vague question, but I'd appreciate any tips or guidance.

Answer 1

You may want to check out "responsive" design. Specifically, I've really liked Bootstrap's implementation. It is all CSS controlled and is based on the viewport pixel width.

You can create responsive CSS by using the following "@media" css code:

@media (max-width: 240px) {
   /* really tiny screens */
}
@media (min-width: 241px) and (max-width: 319px) {
   /* a little bit bigger screens */
}
@media (min-width: 320px) and (max-width: 767px) {
   /* Basically up to, but not including an iPad */
}
@media (min-width: 768px) {
   /* iPad and bigger */
}

Inside each @media tag, you can place your custom CSS for each size, so at 240px, you might have a title class with a font size of 16px:

@media (max-width: 240px) {
   /* really tiny screens */
  .title {
    font-size: 16px;
  }
}

Then rinse and repeat to change the font sizes for each subsequent viewport size.

Answer 2

Use orientation specific CSS such as:

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

Set the viewports setting to the devices max width and take care of the actual width of the content using CSS:

<meta id="viewport" name="viewport" content="initial-scale=1.0;minimum-scale=1.0; maximum-scale=1.0" />