I'm using bootstrap to make a web site. On the browse everything is ok, but on the mobile(Iphone 5c) the carousel grows and shrinks. I tryed to fix the size of the carousel on many sizes like 320px, 480px, etc and add .img-responsive class.
Did you set <meta name="viewport" content="width=device-width, initial-scale=1"> inside of the <head> tag in your html?
You need to do the pevious to ensure proper zooming on mobile devices.
Source
Related
I've developing a store on eBay and having trouble with it on iPhones...
It seems to be nicely responsive in a normal browser, but when I view it on an iPhone it only takes up about half of the screen...
Is there something I'm missing?
The URL is http://stores.ebay.co.uk/the-biggest-toy-store
I've added a viewport tag like this:
<meta name="viewport" content="width=device-width, initial-scale=1">
Thanks!
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
in your index.html page and it should work
A few things I noticed in your site, remove the min-width: 760px from your .stBadge (in your media query only). That will help get the footer within the screen boundary. There is also some kind of border up top that has a wider-than-screen width, possible the #gh-top div... but that may be fixed once the other is.
I am working on a webpage at work and I am facing an issue that my webpage can be dragged to left when viewing on a mobile device.
I do have this meta tag on my website
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
However this does not fix the issue.
Unfortunately due to company policies I cannot share the code here.
I have checked that nothing is overflowing.
I also have the overflow-x set to hidden on my body tag.
The user is unable to scroll (No scrollbars appear) but he is able to drag the page to the left and zoom-out.
Try to change , to ; in:
"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
I'm trying to figure out why this http://mobile.kendallarneaud.me/mobile/wemusic/#player is displaying as if it is "zoomed out" as to fit all in the mobile browsers?
Can anyone give me some insights? I don't want that it should give me a much normal scaling...
http://kendallarneaud.me/mobile/wemusic/#player seems to show it at normal scale
you seem to be missing this very important line, which is step 1 for responsive design:
<meta name="viewport" content="width=device-width, initial-scale=1">
https://github.com/h5bp/html5-boilerplate/blob/master/index.html#L8
I'm serving a page for phones and tablets. I am using OpenX to serve advertising on there. The advertising should be loaded in an iframe which should be the width of the page. I'm using bootstrap.
I tested things with this code:
<iframe src='http://www.cnn.com' width=100% height=120px scrolling='no'></iframe>
This makes an iframe that's the exact same width as the browser window. Problem is that if I open this on an iphone it will rescale the iframe to the size of the window loaded in it, and that's very unwanted behaviour. It doesn't do it on my desktop, only on the iphone. I haven't tested yet with other smartphones.
Basically what I'm looking for is an iframe that is the same width as the screen (100%) and doesn't rescale when I load a bigger page in it
I'm pretty sure you are looking for the viewport meta tag to control this. Here is a reference that will explain it completely: https://developer.mozilla.org/en/Mobile/Viewport_meta_tag
Basically you want to drop this code into your head:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
I'm editing our News site's mobile CSS file. On the iPhone 3gs, 4 & simulator there are some pages (not all) there is an extra right margin.
Here's an example of a page WITH the extra margin:
http://bit.ly/mMA2q7
..and here's an example of a page without it:
http://bit.ly/iQeOGY
Both pages are using the same template. I'm guessing the images are adding the extra margin.
Here is our mobile CSS file http://bit.ly/iW5JVm and viewport:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1;"/>
I tried applying different min-width values to the body but haven't found a solution.
Do you know how to get rid of this extra margin on the iPhone?
your photobanner div is too wide. It gets set to 500px which is way too much :)
try to add width:auto!important to it :)
Same problem, I fixed it adding this code in header:
<meta name="viewport" content="width=1100" />