Make Webpages work with Multiple Mobile Devices

Hello, I have some webpages that I need optimized for mobile browsers... When guests connect to our guest wifi, they have to go through the usual process of accepting the terms and going through the pages before they can connect. We have the normal pages that work fine on a computer and contain a lot of formatting and graphics. The mobile pages are much simpler with less graphics to load on mobile devices without issue. However, the problem that I am having is the pages do not resize to fit the screen of the mobile device. So while it looks sort of OK on an iPad, it is extremely small on an iPhone or Android phone screen. How can I fix this? The HTML is written with variable width, so I do not understand why the pages do not resize on smaller screens.
LVL 1
mfranzelAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RobOwner (Aidellio)Commented:
What CSS are you using?  Would be good to see sample html code of what you mean as it could be any number of things.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
What you will want to do is use media queries to detect the viewport size and based on the size resize and possibly rearrange your content.  


Your media queries will look something like below where you can designate different styles for each viewport width.  It is common to go with a larger image and font size for smaller devices.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- CSS media query within a style sheet -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

Open in new window


Doing the above is coined "responsive" design.  There are boiler plates if you will that can speed up the process. I like using foundation and bootstrap.

http://foundation.zurb.com/
http://getbootstrap.com/

Both of these are built with mobile in mind and include a grid system and js/jquery goodies.  

Making a responsive page/site does take a little more thought as you are planning out multiple layouts on the same page.  You may do a 3 column layout on desktop and 2 column on a tablet and 1 column on the phone.  With each layout, you rearrange or hide/show elements based on the viewport.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
COBOLdinosaurCommented:
If you are using percentage or em for dimensioning and/or sizing, you might want to try using vw and vh for that with percentage as a fall back for older browsers. That can help reduce the number of declarations you need for your media queries.

Cd&
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.