I am creating a template and I have faced the question weather I need to include
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
by default or just to use this:
<meta name="viewport" content="width=device-width, initial-scale=1" />
The template works for building layouts. And they will be responsive in most cases. That is why I want to include the no-scale option by default. Do you think it is a good idea? Do people really need it when they are creating the web app? I have just seen the article that tells no to do so. But it looks very shady and I don't want to trust it that easily. Here it is: http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho
I have just seen the article that tells no to do so.
I don't really understand your doubts, since the page you've linked says:
If you are not coding a responsive site, just don’t use any meta
viewport. If you are coding a responsive website, all you need to
write is
<meta name="viewport" content="width=device-width, initial-scale=1">
Often people tell you to not use maximum-scale=1 and they are right, but the line that I have quoted here is really helpful and let's say required for responsive web pages.
Related
I am watching this video and I see they wanted me to use
<meta name="viewport" content="width=display-width, initial-scale=1">
for more of a responsive website, keep in mind I am in the early stages of learning, even if there is a better way I am trying to learn step by step, but then in chrome when I check my code out and responsiveness I get,
The value "display-width" for key "width" is invalid, and has been ignored.
Do I need to end the meta with </meta> at the end of it at the bottom as well or do I ignore the error?
Try the following <meta> viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I just started learning html/css/javascript and decided to throw together a website for practice. I now know that a lot of the approaches I took in creating this website are seen as bad practice, which is why I will not continue to do them. What i'm having issues with is getting the mobile layout I see on Firefox's mobile emulator to appear as is on an actual mobile device. Any advice on how to fix this issue?
Thanks in advance!
Website Files
Most modern browsers have some basal CSS-styling already: if you type in a <h1>sentence</h1> like this without the basic HTML elements, Chrome will still deliver the webpage.
I built a basic web-design framework like Bootstrap, and these three lines are critical in making a responsive webpage. Make sure to add them at the top of the <head></head>.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Language" content="en">
<meta name="viewport" content="width=device-width">
The dropbox files wouldn't open, so I haven't seen your work. Try adding these and see if it works.
Try adding this meta tag to your pages, in the <head> element:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
I had this issue with Bootstrap awhile ago and then found this nifty answer online. I also would recommend using something like Bootstrap or Materialize.
What viewport do I need to add to the viewport meta tag in order view a desktop version of a mobile site while browsing?
This is a very old question but the answer might still come in handy.
To view a desktop version of a website on a mobile, just remove the tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
from the <head> </head> section of your html code.
For a responsive design use:
<meta name="viewport" content="width=device-width, initial-scale=1">
This has been taken from Web Tuts Plus, who have a full round-up of the best practices, when using this meta tag.
Obviously, this will only work if you have a responsive design (i.e. a fluid percentage based grid, and media queries).
I just uploaded a site that I've been working on locally and got some unexpected glitches that I'm not too sure how to fix, nor do I know why they happened.
The reponsiveness of the blog page here,works fine when you shrink the browser on our desktop, but if you look at it on a phone, it is not responsive at all. Anyone have any ideas?
Your phone has something what is called a Viewport. This is probably what makes it look bad.
Try adding this meta-tag:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
Check this link to get more info about those viewports: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
I'm trying to get my website to be displayed at full scale in any mobile device, like in this example:
As of now, the website opens automatically zoomed-in, and my clients don't like that. I thought adding the line
<meta name="viewport" content="width=device-width, initial-scale=1">
would solve this, but it does nothing. I've tried playing with the initial-scale value to see if it worked and it does nothing. I've set it to initial-scale=0.5, for example, and it didn't change the way the page displayed (to clarify, it doesn't work neither on desktop browser nor on mobile devices).
I've been working on this for days, any help would be greatly appreciated!
EDIT: To clarify, this is a mockup of what I get vs. what I need.
Try to add the meta tags below:
<meta name="viewport" content="user-scalable=yes">
<meta name="apple-mobile-web-app-capable" content="yes"/>
and see it your request will be resolved.