Menu
I've been developing a website in Rails for a local college as a side project for the past few weeks. It's my first production site in Rails and using Bootstrap to speed development. The website looks fine and all is working great except when I try to access the website from a mobile device. When you first load a page the page appears zoomed in. I'm allowing user-scaling so it's not that big of an issue, just an annoying little quirk I was hoping to get rid of.
It only happens when the page is initially loaded in a vertical orientation. If the page is loaded horizontally it's fine.
Here are my meta tags
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="HandheldFriendly" content="true">
Here are some pictures since I'm not overly sure I'm being clear.
Vertical Orientation: http://imgur.com/guJIG5k
Horizontal Orientation: http://imgur.com/SNwvPFD
The outcome is the same on my Galaxy S3, an iPhone 5C, and an iPhone 5S
296
Mobile devices Generally speaking, Bootstrap supports the latest versions of each major platform's default browsers. Note that proxy browsers (such as Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) are not supported.
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.
The viewport is the user's visible area of a web page. The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen. Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size.
Make sure you add:
<meta name="viewport" content="width=device-width, initial-scale=1">
to your <head>.
Fit the size of browser like a Galaxy S3 horizontal, it looks good?
83
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
