In a responsive layout how does the phone determine how far it zooms in when it lands on the site?
Here is an example:
http://eldoradodrillingcompany.com
If you look at it in your browser it looks great, but when you actually land on it on your phone it's like the zoom is too far in. Any thoughts would be greatly appreciated!
Try adding a meta tag in the <head>
<meta name="viewport" content="width=device-width, initial-scale=1">
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">
Morning All,
I'm hoping someone can advise me on the amendments I need to make to my website's CSS to make it display correctly on a mobile device.
At the moment when you view the website in mobile device the menu navigation is displaying at the same size as if it was on a desktop PC, but the rest of the website looks absolutely fine.
From which I can see the navigation uses % once it hits a specific width.
So how can I correct this issue?
I look forward to hearing your fixes.
Please see the website below:
http://www.blanchel.com/
try this:
<meta name="viewport" content="width=device-width, minimum-scale=1.0" />
if you don't want to allow zooming, add max-scale at the end:
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
Let's say I have a website that looks like this in its mobile view:
What would be the best way to make the font more readable?
The viewport is currently configured as follows:
<meta name="viewport" content="width=1366, user-scalable=yes">
Would changing that to
<meta name="viewport" content="width=device-width, initial-scale=1">
make any difference? Are there any online emulators that can show me how the site would look with that viewport? I'm new to this obviously, but so far I've been using mobilephoneemulator.com, where I can see my changes to the CSS, but not changes to the viewport.
I have also tried increasing the fonts, but it seems like the font size has to be increased to a large value in order for the text to be readable, so that's why I thought the issue might be with the viewport or something other than the size of the font.
The reason the text is so small, is you are telling the browser that the width of the phone is 1366px basically zooming out from the website.
So yes, using:
<meta name="viewport" content="width=device-width, initial-scale=1">
Should fix the problem.
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'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.