I developed a website. The layout is fine in desktop. But it is not responsive. I tried for mobile with media queries like,
#media only screen
and (min-device-width: 320px) and (max-device-height: 640px)
{
.....
}
I am using chrome development tools and make changes in the site according to the size 320 x 640. Now the problem is fine in simulator but not in the actual mobile.
Help me to find the solution.
The symptoms you describe suggest that you may not have a viewport metatag in the head of your page, so double check this first.
What you want is something like
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
</head>
More about viewport meta tags
https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
Related
I have a responsive webpage that changes as the screen resolution changes, but for some reason, it loads the non-responsive version whenever I load the page on my iPhone:
http://rayku.com/register
The home page is fully responsive on the iPhone (http://rayku.com/home), but I'm not sure why the registration page isn't. Do you have any ideas?
I don't have an iPhone, so I can't test this, but it looks like you're missing a meta tag from your <head> tag. Try adding this:
<meta name="viewport" content="width=device-width, initial-scale=1">
Hope this works.
You're missing the viewport meta tag (which is correctly present on the home page).
<meta name="viewport" content="width=device-width, initial-scale=1">
I am working on a website: www.sc1.online-folio.com
for mobile and tablet devices I want to show this site 100 zoomed out (or maybe a little more) so user can see full site at first glance and zoom in the area he wants to view.
I am using this meta tag to zoom out
<meta name="viewport" content="width=1100" initial-scale=1.0, minimum-scale=1.0" />
I set the width 1100 so the website look a little zoomed out for better viewing of slider area. This is all working fine on android devices but on ipad and iphone the site is zoomed like this: http://www.responsimulator.com/?url=http%3A%2F%2Fsc1.online-folio.com%2F and no changes in meta properties are working.
So guys can you tell me what exactly I do to control the zooming on iphone and ipad devices.
You have written the attribute incorrectly, replace the quote after width with a comma.
So that:
<meta name="viewport" content="width=1100" initial-scale=1.0, minimum-scale=1.0" />
Becomes:
<meta name="viewport" content="width=1100, initial-scale=1.0, minimum-scale=1.0" />
But to answer your question, viewport is the thing!
I changed this site over to html5 using the html5 boilerplate. Everything looks fine when viewed on a desktop or even an ipad but when I view it on my iphone it zooms in only showing the contents of my .wrapper div. I've tried removing the
as many have suggested. I also tried adding maximum-scale-1.0, initial-scale=1.0, and minimum-scale=1.0 and none of these or combinations of them have solved the problem. I also tried setting my body and html tags to width:100% with no luck. I can't seem to figure out what the problem is and if it's a css or meta tag problem. The site is located at www.sweetestgourmet.com.
Try adding this to <head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
use css3 media queries
include meta tag as show in the head tag
then in stylesheet taget iphone as
#media only screen and (max-width: 480px){
/* write your css */
}
here is tutorial http://css-tricks.com/css-media-queries/
Quick question, as I think this should be very simple for those who know how it works (HTML5 app building is new to me).
I'm using Phonegap to build an app, problem however is that the default built from phonegap is portrait orientated. Atleast, that's what it seems. When I test the app on my ipad the width is adjusted fine, bu the height for some reason is bigger then the actual content of the body. I narrowed it down to this line:
When I remove height=device-height it works fine. With other words, I'm getting the wrong height of the device there. When on landscape, do I need to switch to height=device-width or something? Because that seems kind a weird, I would expect my height to change based on the orientation.
I think the code below solves your problem. You need to use
<meta name="viewport" content="width=device-width, initial-scale=1">.
and this structure
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js">
</script>
</head>
<body>
...content goes here...
</body>
</html>
Check more info on JQM Anatomy of a Page
to work with iOS screens have to make two views, one for landscape and one for portrait, measures ipad screen is 1024 × 768 pixels then I think you should handle them directly with numbers, or keep trying with the options PhoneGap gives
it's possible with jquery or metatag remove the automatic resize in my website when i visit it on ipad? Is there a way to preveni this action of safari ipad?
I've come across the metatag "viewport".
I use it to strictly define the size of mobile websites and prevent scaling.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
By changing the width I expect you can force your website to a given width on all devices.
By querying the device using Javascript navigator.useragent you can restrict this to just iPad.
if (navigator.userAgent.match(/iPad/i)) ...