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.
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 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/
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
I am designing a mobile website and I first tried just to use a regular html page with a h1 tag. It looks very tiny so I searched and found out that I need to add these lines:
<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
After trying several web pages to understand it, I still am confused. Is the viewport an additional device-width that on for example iPhone is 960px? Even though the iPhone 4 is only 640px so it scales it down to emulate that size? So in order to prevent it from thinking the viewport is 960px it says that it is equal to the size of the screen?
If this is the case, does other browswers/devices such as Android running devices have different widths (other than 960px)?
Per the jquery mobile documentation, there is a bug for iOS with this:
There is a minor issue in iOS that doesn't properly set the width when changing orientations with these viewport settings, but
this will hopefully be fixed a a future release. You can set other
viewport values to disable zooming if required since this is part of
your page content, not the library.
They recommend the follow line:
<meta name="viewport" content="width=device-width, initial-scale=1">
You also don't need the user-scalable either, the above line won't disable user zoom.