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">
Related
I have a website which must be responsive for mobile phones. I've created it using my desktop. When I adjust browser windows it's working perfectly for mobile phone but when I check it on my real mobile phone: Samsung Galaxy S2 it's not responsive to the mobile view.
What could be the wrong?
You are probably missing the viewport meta tag in the html head:
<meta name="viewport" content="width=device-width, initial-scale=1">
Without it the device assumes and sets the viewport to full size.
More info here.
I have also faced this problem. Finally I got a solution.
Use this bellow code. Hope: problem will be solve.
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
Though it is answered above and it is right to use
<meta name="viewport" content="width=device-width, initial-scale=1">
but if you are using React and webpack then don't forget to close the element tag
<meta name="viewport" content="width=device-width, initial-scale=1" />
Responsive meta tag
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, shrink-to-fit=no">
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.
To make the website look good on mobile device also i used
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=true width=320px">
but the above code shrikes and zooms out the size to 67% on desktop site aswell
do i have to add multiple code to make that restrain from happening