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).
Related
I am trying to create a web page and I've added some media queries for managing how the website looks depending on the width of the device. The problem is that, for example, a media query set to affect devices under 800px DOES work if you resize chrome in your computer, but it DOES NOT work in phone devices, even though the condition (less than 800px) is fullfilled.
I'm including a link to the website so that you can check this out on your computer/phone
https://serchpics.github.io/Homepage/
I would really appreciate the help because I can't figure out why this might be happening. Thx! :)
Your site doesn't have a viewport set, so it zooms out every time you load the page.
You can set a viewport by putting this code under your <meta charset="utf-8"> tag.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
You can learn more about viewports here
Try to add into <head> section:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
While using Bootstrap, is there another way to make the mobile-first responsive web page other than using the viewport meta tag?
<meta name=viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Bootstrap is developed to be mobile-first. You don't have to do anything to enable mobile-first design with Bootstrap. But it is recommended by Bootstrap to add the meta-tag as described in the documentation:
Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.
<meta name="viewport" content="width=device-width, initial-scale=1">
The viewport meta-tag is also commented as required meta-tag on the starter template.
I have developed I website for one of my clients when I check it by "Mobile/ Responsive Web Design Tester " chrome Extention it's pretty responsive but when I'm checking on my phone it's not responsive I have tried everything that I knew but couldn't find the problem any help will appreciate it
the site line is Link
HTML5 introduced the possibility of controlling the sizing through the meta tag. You can use this tag in your <head> to tell the device which scale to use on your content.
Try adding this into your page <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Source: https://www.w3schools.com/css/css_rwd_viewport.asp
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.
I am using bootstrap 3. In my document I have:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
When I use chrome dev tools and shrink the page or choose mobile view it works perfect. On my iphone 6 it is always desktop view.
I ran google mobile friendly test and it returned:
Text too small to read
Links too close together
Mobile viewport not set
Am I missing some other piece of code that is relevant?
I figured it out. I was forwarding with Masking to heroku, and google was not able to read my meta tags.