The following page scales down in a desktop browser when the viewport is decreased
http://rocoru.com/blog/
However, when viewing from the iPhone itself, the desktop version is still shown regardless
why might this be?
Try to add the meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
You can get some more information about this tag and why you need it by googleing
"viewport meta tag"
Try using this in your media queries for mobile.
.excerpt .entry p {
overflow: hidden;
}
Related
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
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"
This is how the site I'm putting together should look:
GB Personal Training
This is what it looks like on the iPhone:
iPhone Browser
As you can see it pushes in the #wrap and #outer-wrap DIVs, so that the background images in them have a right margin and I don't know why. I only have access to the custom.css file and not the HTML.
I'm currently editing a clone of it at:
gbptclone.live.subhub.com/
Define max-width in your body. Write like this:
body {
min-width: 1000px;
}
add this inside your HTMLhead:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Actually this will prevent the user to zoom the content (wich sucks, from an user end experience):
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Instead, in my opinion (and I am no guru), you should use:
<meta name="viewport" content="width=1000px">
Try setting a width for #outer_wrap and #wrap (you probably want 100%).
It looks like Mobile Safari is expanding the size of the #visual-portal-wrapper div, which isn't enough because Safari resizes text for iPhone display. You can change this with -webkit-text-size-adjust: none; but that would make the links rather undersized for iPhone users. That's why it fits in a normal browser but not in Mobile Safari.
Changing the width of the divs should stop them from having content expand beyond their edges (they're 974px by default because that's what #visual-portal-wrapper is, but all the contents overflow and cause the visual errors) and have the background images appear cut off. You might also want to add background positioning for #outer_wrap since it appears slightly off on the screenshot from what I'm seeing in Firefox.
Edit: Alternatively, you could try changing the width: 974px; on the #visual-portal-wrapper div to min-width: 974px;, of course making sure you account for IE's problems with min-width).
how can I get my fixed width site to always appear "fully zoomed in" on webkit (iphone and android) browsers?
right now, it looks fine on an iPhone and "too small/zoomed out" on an Android phones that have higher resolution.
i'm trying this viewport:
<meta name="viewport" content="user-scalable=yes, width=device-width, target-densityDpi=device-dpi, initial-scale=1.0" />
The following worked for me. The page gets scaled down for medium and low density devices. Android 2.2 has some issues with handling meta tags.
<meta name="viewport" content="width=device-width, target-densitydpi=high-dpi" />
Try changing the "initial-scale=x.x" number until it looks right:
<meta name="viewport" content="user-scalable=yes, target-densityDpi=device-dpi, initial-scale=1.6" />