I am trying to make a responsive website. Basically when you resize the browser, things shift around and such. Right now I have that portion working fine.
The problem though comes when I Load the page on my cell phone, the phone seems to load in 1024 pixels width no matter what. Right now I forced my content to be 450 pixels wide, and that did not do the trick either. Does this has something to do with the fact I am using max-width? Can max-width tell the phone to load it in 1024 pixels? If so how can I get around that, how do I tell the mobile devices to load the website in the size they are intended?
At this point in time I am not using any media queries because I have not gotten to the part where I require them, but I'm also wondering if this is the problem as well? Do I absolutely must have media queries and lets say if its 720 pixels, I have to force every object to have max width of 720 pixels or it will not work?
Looks like you're missing the viewport <meta> tag:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Related
I'm trying to understand a few things that deal with pixels.
The first of which is what changes between developing an html email and a website in terms of appearing on a mobile screen. To be more specific, when developing a website, I can have media queries that run below 375px (i.e. #medie screen and (max-width 375px)) and the changes occurring in that code will not be reflected on desktop (since most browsers without going into inspect restrict their width at 400px); however, on a phone that has a smaller screen like my iPhone SE, the changes that occur under this media query DO get hit.
So that on its own makes sense to me, because my phone screen is smaller than my min browser width, of course the changes I apply in that block will hit when the website is executed on my phone. But now is where some confusion gets introduced. When developing an HTML email, I have a table set to 600px wide. There is no media query affecting this HTML. The table is 600px wide under all circumstances, so when displaying on my less than 600px wide phone, I would assume that some of the page would clipped, but this is not so. When viewing the email in something like GMAIL, the entire composition is visible. This made me scratch my head for a bit, so I researched and found some sources claiming that this phone is actually greater than 600px wide. So my thought is that the screen density is just greater than that of my laptop, or maybe its some magic that GMAIL is applying, but either way, the email shows up just as it would on my laptop in a browser width greater than 600px.
I'm using these meta tags
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
and I have a base understanding of what they do, but how do these contribute to mobile exactly?
In summary, my main questions are as follows:
why is it that my media queries with websites that run max-width: 375px hit my phone, and yet a table which is always 600px wide is fully viewable a the same time?
is this a matter of screen pixel density, or is it a little more complex?
what roles do these meta tags play exactly?
Any insight you can provide would be much appreciated. Thank you.
why is it that my media queries with websites that run max-width: 375px hit my phone, and yet a table which is always 600px wide is
fully viewable a the same time?
Because your phone visual port actually has a width of 1136 pixels and a height of 640 pixels.
is this a matter of screen pixel density, or is it a little more complex?
Its a matter of screen pixel density, the default pixel ratio depends on the display density:
Default ratio when the viewport scale equals 1
Display density < 200dpi Ratio = 1.0
Display density > 200dpi && Display density < 300dpi Ratio = 1.5
Display density > 300dpi Ratio = integer floor(density/150dpi)
for the iPhone SE its 326 ppi (pixel per inch).
what roles do these meta tags play exactly?
The tag its not part of any web standard and it was introduced by Mobile Safari, the width property controls the with size of the viewport, device-width its a special value, this is a typical use of the tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
which sets the width to the width of the device viewport, and a zoom of 1, the width its in CSS pixels it doesnt take into account pixel density at all. Changing the value of the meta tag with JavaScript works, the website will react to the new value.
Try setting the width to 375px to see what happens in your phone.
Check this 2 articles:
pixel its not a pixel
2 viewports
I am facing a problem on this particular page. http://staging.creativewritingagency.com/contact-us.php
Now, this is not a responsive website. The client only requires that he should be able to view the complete page (without zooming in or out on the mobile screen) in first view. Later, he would pinch in and out to view and read the text.
So I did a bit of research and found that this can be done using viewport meta tag. I inserted the following code to <head> section
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
As per my knowledge, this code should
set the width of webpage to device width
set initial zoom level at 1.
let the user perform zoom actions
However, this code seems to be working only on Chrome for Android. Safari browser on iPhone 6 Plus is still displaying full page. Here's a screenshot of what I see on emulated iPhone 6 Plus on Browserstack. http://prntscr.com/81vs1n
Could someone please look into it and point where I may be doing things the incorrect way.
P.S. This is my first question on Stack Overflow. I am open to suggestions on improving the questioning format.
EDIT - Width of my web page is 1170px.
The width=device-width is the issue.
It can be set to a specific number of pixels like width=600 or to the special value device-width value which is the width of the screen in CSS pixels at a scale of 100%.
The width of the viewport in pixels. The default is 980. The range is from 200 to 10,000.
https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
Set fixed width in meta tag not according to device.
So I stumbled upon this link while reading more about viewport. Today I learned that viewport is used to normalize the built in zoom behavior.
Thanks #subodh for pointing me in that direction.
Now, I have updated my meta tag to read like this and it works like a charm.
<meta name="viewport" content="width=1180">
EDIT - Forgot to mention, I removed initial-scale from my actual code. It was causing the page to zoom to 100% original pixels, as a result of which, it had to be scrolled horizontally.
We are looking at an existing (non-responsive) site whose width is 1230 or so. So on mobile devices its content, even compressed as it is, loses about 10% off to the right.
That's bad, as their phone number (plenty large enough to see, even compressed on a mobile) is right aligned and we lose some of the digits unless the viewer scrolls across.
As a quick stop-gap remedy I figured we could set:
<meta name="viewport" content="width=1235">
But that's ignored on the phone I'm testing with.
I've checked that the phone responds to a much lower viewport width - if I set it to 300 or something than I get zoomed in content (top left hand corner), as you'd expect. Just it doesn't respond to a viewport set beyond 1024.
Remember, the viewport is an effective screen size for mobile devices. The idea is that since your website isn't responsive, it doesn't do any good. The problem lies in your CSS rather.
But yes, you can set the viewport higher than 1024. Generally, the viewport should be slightly wider than your web content to make sure you have a little bit of margin next to your text for readability.
Have a look at this Introduction to Viewports.
Don't forget to use this along with media queries to achieve responsiveness. I usually use this and it works for me across a range of mobile devices. You don't have to hardcode content width though.
<meta name="viewport" content="width=device-width, initial-scale=1">
But as I mentioned earlier, the problem lies with your CSS positioning and the viewport tag isn't the solution. You can probably do a media query to reduce size of the phone number.
This question already has answers here:
Android viewport setting "user-scalable=no" breaks width / zoom level of viewport
(3 answers)
Closed 8 years ago.
I'm having some problems getting my website to scale correctly for mobile devices.
We have a site that's designed to be a minimum width of 640px, maximum of whatever. I have the meta tag currently:
<meta name="viewport" content="width=device-width;minimum-scale=0.5,maximum-scale=1.0; user-scalable=1;" />
Now - The part i'm confused about is that if I use "initial-scale=1.0", obviously the site will scale 1:1, and it will look crappy on an iphone 3Gs (will only see half the site). Now, on an Iphone 4, (having a 640px wide resolution) it will be scaled properly at 640px if I use "initial-scale=1.0".
Alternately, if the graphics are 480px, 3Gs would require scale=.667 and iOS 4 would require 1.3, correct?
So how do you get the site to fit perfectly edge to edge? Can the browser detect the device width and then set the scale accordingly?? There are lots of different device widths out there... android, older iphones, blackberry's etc.
Getting quite frusterated :( Feel like i'm missing something important that I should already know.
Edit It seems that the 'initial-scale' meta tag should be scaling the site relative to the viewport, then using width=device-width to set the actual viewport size.
The problem I seem to be having is that the viewport isn't scaling to fit the device, it's staying at 640px no matter what tag I use. What am I missing here???
I think the main issue with the original message is that semi-colons don't appear to work on iPhone 4+. It only works with commas as separators (or only the device-width setting). Other browsers seem to be more tolerant.
The following works reliably for me:
<meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1" />
You'll also want to disable the body and document from scrolling horizontally:
body, html
{
overflow-x: hidden;
}
Good link for more info on Mozilla Site:
https://developer.mozilla.org/en/Mobile/Viewport_meta_tag
"width" is to tell the browser how wide your website is at 100% zoom. if you have designed your website to be fluid, you could specify "device-width" here, and the browser won't need to use any zooming, as your layout is designed to fit any viewport width.
"initial-scale" is for overriding the default behaviour of some devices to zoom in or out on your website so that the website width (which you specified above) matches the screen width. setting this to 1 basically says "don't zoom for this, use scroll bars if my website is too wide for the screen, and leave blank space at the sides if it's too narrow". if you do want your website to fill the screen width exactly, don't use initial-scale.
Ok, i've figured it out... essentially.
Because my design is actually 2x the size of the viewport (sort of), the key is just to use "initial scale = 0.5". It works correctly on both devices (3Gs and 4), and more or less correctly on android devices, etc.
Kind of tricky, and it seems like there should be a better way to do this, but for the time being, it works.
Thanks all who provided input.
I believe that the answer is that you want to tell the web browser to always scale the site to 640 pixels. I would even turn off the ability for users to scale the site so that stray drags don't re-size everything.
Try this:
<meta name="viewport" content="width=640; user-scalable=no;" />
I'm in the process of building a support page for my pre application.
I'm having a problem where the content on the page is very small, so the user has to manually zoom in to read it.
I've made the page so that there is nothing very wide or tall, but for some reason everything is very "zoomed out" when you first navigate there on the Pre.
I've noticed that sites like wikipedia have versions that are perfectly optimized for the Pre. How can I make my pages start out "full-sized" the way wikipedia does?
Update:
The extremely simple page that I am currently testing with.
On the above page I have tried setting the width for every element to both 310px and to 100%, the result is always the same.
I figure I can accomplish this by giving everything a static width and then making everything use a very big font size. I'm just guessing that there is a "better way", i.e. some way to let the pre browser know that it doesn't need to start zoomed out to the size of a "normal" web page (it seems that the default zoom is about 1024px wide, even though the actual rez is 320px).
I found out the proper way to do this on the webOSDev forums.
The following should be in the header:
<meta name="viewport" content="width=device-width"/>
<meta name="viewport" content="initial-scale = 1.0"/>
This has the advantage that when the user turns the device into landscape mode, everything scales appropriately, without any styling gymnastics.
Posting a URL of a problem page would be a big help here.
In general, to show nicely on smartphones, the design of the page has to be "fluid" (taking 100% of the width in percent - not specified in pixels) to use the most space in differing screen resolutions. The minimal width supported by the design should be about 300 pixels, to fit without zooming on 320x480 screens.