I have this:
<meta name="viewport" content="width=device-width, user-scalable=no" />
So the user doesn't need to zoom, but I have an image which is 417x47 and it looks too big, I mean the user has to scroll left and right in order to see it.If I remove <meta name="viewport" content="width=device-width, user-scalable=no" /> It looks how I want, but I can't do this since I have a lot of text content, Is there a way to scale down only the images, or what's the size that I will need to resize it.
You can use a media query to set the width of the images to 100%, or a pixel-size you think its right, like so:
#media only screen and (max-device-width: 480px) {
img {
width: 100%;
}
}
Related
I want my site's width to automatically fit on the iPhone portrait screen (testing on an iPhone 5). I currently have the width CSS set to 100% and am using this meta viewport tag:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
This technique was recommended by this question: Website does not automatically fit to iphone screen
It doesn't work for me though. The site width is still way wider than the iPhone portrait screen.
How can I get the site width to automatically fit on the iPhone portrait screen?
Make sure the viewport is configured correctly:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Make sure you don't have content that is wider than the viewport.
For instance if you have an image that is wider than the viewport set the CSS to
max-width:100%;
I think you may just be off a little. This is what works for me.
<meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1.0,maximum-scale=1.0" />
media="(max-device-width: 480px), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), all and (max-width: 480px)"
Hi all,
The CSS is working fine on a desktop with a viewport of 480px or less as intended but it doesn't kick in on iPhone. Any idea what could be wrong with the media query code?
Thanks
Do you have the viewport meta tag in place?
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
I am developing a jquery mobile app and I'm trying to load a splash screen and for the life of me can't work out why its not loading.
Here is my code
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="apple-touch-icon" href="http://maps.mappingsa.com.au:81/DestinationRiverland/images/icon.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-startup-image" href="http://maps.mappingsa.com.au:81/DestinationRiverland/images/splash.png">
<title>Dest River</title>
I can link to the images no worries and the touch icon works fine.
Any suggestions?
you just need to have a png file according to the pixel size of you iPhone or iPad and give the name of the File
Default.png it works
Another way other than Default.png is by simply dragging and dropping the PNG files to the following boxes under your target settings. Note that the must be the correct size, 1024x768 for landscape and 768x1024 for portrait.
I am testing a mobile site with 2 iPhones. When I rotate 1 into landscape mode, the text resizes (desired). When I rotate the other into landscape mode, the text does not resize (not desired)
I have tried using the -webkit-text-size-adjust style, but the same behavior occurs
html, body, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust:none;
}
My head tag
<head>
<meta charset="utf-8">
<title>Site</title>
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320"/>
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
Is there some setting that can be changed to always resize text? Should I revisit my meta info for mobile?
Edit:
iPhone1 = iPhone 4 Verizon running iOS 4.2.6
iPhone2 = iPhone 4 AT&T running iOS 4.3.5
Thanks
device-width always refers to width in portrait mode, so width=device-width will scale the viewport in landscape mode. This is a quirk of the iPhone (and I think iPad too). Seems a bit dumb, but this is how apple have done it.
So just use:
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0">
Or better this, which will still allow the user to scale if they want to:
<meta name="viewport" content="initial-scale=1.0">
I'm creating a simple mobile website to render specifically on iPhone. I have been researching the viewport setup in order to have the site fixed at 100% So far I have found that the dimensions are
Portrait: 320px
Landscape: 480px
To render the page at full zoom I have used the following meta tag in the html
<meta name="viewport" content="width=device-width; initial-scale=1; user-scalable=no" />
This works great in portrait, however when the iPhone is rotated to landscape mode the page is not resized accordingly, instead appearing zoomed in.
Can anyone advise on how to correct this behaviour?
width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0
Let's assume your website is wrapped in a container called #wrapper.
We can set the width to 100%, and only allow it a maximum value of 480px. Like so:
#wrapper {
width: 100%;
max-width: 480px;
}
You can also listen to the event that fires when the iPhone's orientation changes, i.e. when you flip the phone.
In HTML
<body onorientationchange="someFunction()">
OR In Javascript
window.onorientationchange = someFunction;