Responsive site misbehaving

[brandozz]

I've developed a site using bootstrap as my framework, my responsive layout is misbehaving on some tablets and phones.

1. When testing on my Android Galaxy Tab and Kindle the site only fills half the screen.
2. The site loads properly on the iphone in portrait but when rotated to landscape it seems to zoom in and only shows half of the page. The opposite of the Android issue.

I have my meta viewport set as:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Has anybody else ever experienced these issues? I can't seem to figure out what would be causing the issue. When I test on my desktop in chorme and firefox the layout collapses and expands as expected.

[adamxcl]

I have seen what you are describing before. Still see it on man websites. I sometimes would pull my hair out testing different devices. You think you have it working on iPads, phones and computers and then the Nexus doesn't work right. Get it working there and then the iPad doesn't work right. Pretty much everything I have tried over the last two years, you can then find some mobile device that doesn't work right.

I remember when I got the first Google Nexus on the day it came out. Some of their own stuff like Google Maps didn't work right. Then a Chrome version had a major bug for a while on just the Nexus. There is just too much going on now and too many companies going in their own direction.

I was able to spend a couple hours with the head of Safari development team last summer trying to solve a weird problem. After trying everything, we basically determined that Google was doing something just make it mess up on ios devices. When faking the device response to something else, it then worked on the same device.

Just get all the big name devices for testing and make sure it works on all those.

[brandozz]

Thanks for your feedback. It ended up being a slider that I'm using. I had a div with a very large width inside a container div. I removed the width so as of right now, at least on the devices that I've tested, everything seems to be working.

It is frustrating trying to create a layout that works and is consistent on every device. On my Galaxy Tab 2 I can't seem to get any of my headings to be bold. Not sure why, still investigating.