I am trying to force all mobile devices to have a rendered screen size of 640px wide. I've used:
<meta name="viewport" content="width=640">
Unfortunately, when I emulate screen resolutions in Chrome, the page sizes completely differently between different devices.
If I emulate a Note 3, it looks far different than an iPhone 4.
I've also tried doing:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
But this only works for any screen who's initial scale or pixel ratio is set correctly. For example, the note3 has to be set to initial-scale=.5623 for the page to look like it's 640px wide, but that's not the case for the iphone.
What am I missing??
Related
I am trying to create a notification container with CSS that is the same size as notifications on iOS on my iPhone 6S.
I have created screen grabs of portrait and landscape. When I view the images the sizes of the notifications in pixels are 718x262 and 841x262 respectively.
When I create the notifications with the same height (262px) they are displayed on the device differently 200px in portrait and 357px in landscape).
https://www.dropbox.com/sh/bmkv2gua62r4zly/AAC0xPZIURWZFwCb9pFzDk1Da?dl=0
Adding viewport meta tags fixed the issue
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=1.0">
Hello friends to see if someone gives me a hand to tailor my web devices.
I tried to media queries and my phone (I have only one, Motorola Moto G) I managed to adapt, but I have not used the viewport tag. I just have been adapting the CSS through this media query:
Landscape:
#media screen and (max-width: 1000px) and (min-aspect-ratio: 13/9) {
}
Portrait:
#media screen and (max-width: 1000px) and (max-aspect-ratio: 13/9) {
}
On my phone the web is perfect, I managed to adapt both landscape and portrait. But what happens is that I have only this phone and do not know how the page will look in other devices, putting the viewport tag is deformed giant and completely:
<meta name="viewport" content="width=device-width, initial-scale=1">
The problem is that I'm pretty lost with this, because to prove my page this also deformed giant appears:
http://www.responsinator.com/
The question is, resolution is 1280x720 Moto G? Why to place the viewport tag goes so distorted? I do not understand, see if someone can explain. I tried to find information on the Internet but I can not understand it.
Thanks
What I think you're asking is that:
Is the Viewport Tag (the meta tag) absolutely essential because it is messing up your view of your website on your device.
To answer this, lets look at the viewport tag itself:
<meta name="viewport" content="width=device-width, initial-scale=1">
This tells the browser to set the initial scale to 100% of the viewport window, and the width of the body element to that of the device, so it is telling the browser to correlate the width of the webpage body element to the same width as that of the device viewing it.
In short, no the viewport tag is not absolutely essential, but it is an extremely good idea, although you can change the settings on the content part of the tag such as
<meta name="viewport" content="width=500, initial-scale=1">
or
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
You can do no wrong reading up on the Mozilla Developer Network page on the topic which will tell you the possible values you can set in the viewport tag. These are entirely seperate from the CSS display values and are used as a default for how the browser renders the page.
I can not give you more specific advice without you providing a more specific issue in your question
My mobile device is HTC One X, resolution: 720x1280
I need to do responsive web-page
in html i write <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
But in browser i have 360px width. I have checked it using $(window).width() or document.width
It renders at 360px wide, but the depth is 720px. In other words, it uses 4 pixels to display 1 normal pixel. So all normal graphics will appear blurry as it's upscaling the image twice the size. So the solution would be to create twice as big images, and scale them down 50%.
To the best of my knowledge, the syntax when declaring the viewpoint should be:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
Note that it uses commas instead of semi-colons, and there isn't any anything directly before the closing />.
From what I've read, using semi-colons may cause issues with certain browsers.
Good luck!
That may be your compressed resolution, not your scaled resolution.
If you look at the specs for your smartphone, you will see that a 4.7inch screen has 1280px by 720px resolution. See specs. That is approximately the same resolution as my 13" Macbook, which is impossible since my Macbook is over twice as wide. Hence, they are marketing the compressed resolution, which is not the resolution that browsers consider in handling media queries.
I'm building web application using RWD. I've written media queries for different resolutions say 1024, 768 and 320.
I'm using below metatag to decide page width
<meta name="viewport" content="width=device-width, initial-scale=1" />
There are few devices e.g. iPhone 5 with resolution - 1136×640. When I'm opening my webpage in iPhone its displaying 320 layout in landscape mode where as its resolution says its 1136px wide.
I know it has CSS pixel ratio as 2 but not sure logic between CSS pixel ratio, media query width and device resolution calculation.
Is there are any article or link that explains this and will tell why its displaying 320 layout for iPhone.
Thanks in advanced.
Try using this meta declaration instead:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
I am working on a website which is designed to work best when viewed in landscape mode on iPad. Everything is in a 1024px wide <div> container. However, I am still required to scale down the viewport so when the user turns the iPad into portrait orientation, the user does not have to zoom out or scroll horizontally to see everything on the page.
Currently I have this <meta> tag in my <head>:
<meta name="viewport" content="width=1024px, initial-scale=1.0, maximum-scale=10.0" />
Everything displays fine when the page is viewed in landscape mode, but I can't get the abovementioned required portrait behavior to work. I tried changing the initial-scale to 0.75, and the exact opposite happens: everything fits in portrait mode, but there's extra horizontal space when iPad is in landscape mode.
Is there any CSS, Javascript or special viewport setting I can use to get this to work?
P.S. I cannot use user-scalable=no.
You can even add the orientation properties within the same CSS that you use for desktop browsers...Just need to add the following;
#media only screen and (device-width:768px)and (orientation:portrait)
/*iPad Portrait orientation styles */
#media only screen and (device-width:768px)and (orientation:landscape)
/*iPad landscape orientation styles */
Again remember for iPad, device-width is always 768px irrespective of the orientation...I know it's confusing, but that's the way it is...
You can also check out a very good tutorial on the same at
http://itunes.apple.com/in/app/designmobileweb/id486198804?mt=8
You may be able to use orientation specific CSS like this:
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
In that case you will likely have to set the viewports setting to the devices max width and take care of the actual width of the content using CSS. For example, wrap everything in a div with the appropriate width for each orientation, 1024px or 768px (minus the status bar and browser chrome is neccessary).
<meta id="viewport" name="viewport" content="initial-scale=1.0;minimum-scale=1.0; maximum-scale=1.0" />