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
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.
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;
}
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no" name="viewport">
to be able to see all the important stuff, on normal desktop, a windows width is always 1000px or more, but on iphone, i like to make sure the screen is 1000px minimum width
is it possible to do that ?
the site that cause problem is : http://www.benoitjacquesdesigner.com/index.html
look at the text on top, it cut .... or explaint to me the white right band (missing background)
--
sub question, is there a place where i can learn by myselft all the mobile trick and tips... i often go to w3school, but people tell some bad stuff about this site...
iOS products(so does most Androids) have min-width as 600px, and making it so, will work.
research on media queries
Try
<meta content="minimum-scale=1.0, width=device-1000, maximum-scale=1.0, user-scalable=no" name="viewport">
OK, with some testing that work : <meta name="viewport" content="width=1200">
The main body of my site is 480px wide - see example here: http://5things.me/
It should fit perfectly on the iphone, but somehow the default view seems to be using a far wider grid.
I am showing 2 images below - the first one is what it currently appears as, the second one is what is should appear as.
I should not need to do too much mobile customization, since the whole site is only 480px wide =)
Add this to your page
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
Look here for more iPhone-related tags:
http://www.omiod.com/iphone/dev-notes.php