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">
Related
This viewport is working fine in inspect element mobile view, but when I check it on actual phone devices it's not working fine.
Can you please explain what is my problem using that viewport?
<meta name="viewport" content="width=device-width,maximum-scale=1.0,initial-scale=1.0,minimum-scale=1.0,user-scalable=yes">
Or should I use this viewport to fix the display on the physical mobile device?
<meta name="viewport" content="width=device-width, initial-scale=1.0">
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">
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 have the following viewport
<meta name="viewport" content="initial-scale=1,user-scalable=1">
On android, the page loads as if it were in a desktop - the whole page is viewable and zoom-out to fit the screen
on ios - the page loads without zoom-out, and what is viewable is the upper left corner of the page.
I've tried using width=device-width and width=1350 but nothing seems to work
What do I need to do to make the page load so it would fit the screen fully no matter the screen size?
Why don't you use this:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I think it's most recommended meta tag.
I am using this viewport tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
However, the iPhone/iPad/Android devices the page comes out much larger than the screen. I can only see the top left corner of the site. My web site is 900px wide.
Next I changed viewport to this:
<meta name="viewport" content="width=device-width">
Now on the iPhone and maybe iPad it comes out okay with the content zoomed out so that it is filling the screen. I'm not sure about the iPad since I don't have one of those to test with. On Android devices this change did nothing.
What is the correct way to set view port so that a site fills the browser width?
Try adding target-densitydpi=device-dpi to your second example. This is Android specific and works with width=device-width to tell the device that you want the page to be scaled to fit at all device resolutions.