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
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">
I want my website to be responsive on all platforms (especially mobile), not just on a desktop when resizing the browser window.
I have used the meta viewport tags in my <head> that other similar threads say I should do, but nothing has worked.
What's not working with the viewport tag #Rohan? I noticed that it was missing from your template
<meta name="viewport" content="width=device-width, initial-scale=1.0">
How can I make my website have the same view even if it's viewed from a smartphone, tablet or PC? I have a table on the webpage. I've tried this but has no effect:
<meta name="viewport" content="width=device-width, initial-scale=1">
Your declaration is saying to size the web page to the width of the device, which it doesn't seem like you want. You actually want the opposite of this if you want it to show up on mobile similar to on desktop. Try setting a fixed viewport size, so that the website will not take screen size into account on mobile devices:
<meta name="viewport" content="width=1024">
I am testing my site https://www.industrialstores.com/ in google page speed but user experience under mobile tab, it is showing to correct this "The page content is too wide for the viewport, forcing the user to scroll horizontally. Size the page content to the viewport to provide a better user experience."
I set my viewport in header as
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I tried different viewports defined in different stackoverflow question but not able to find my solution yet.
<meta name="viewport" content="width=device-width, initial-scale=1">
Check out: https://css-tricks.com/snippets/html/responsive-meta-tag/
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.