为什么我的网站在移动设备上关闭？ [英] Why is my website cutting off on mobile devices?
问题描述
我创建了
您尝试过的meta视口标签告诉浏览器几个不同的东西：
< meta name =viewportcontent =width = device-width />
这告诉浏览器内容宽度应该适合设备宽度。要成功使用此页面，您的页面宽度应该可以针对设备进行调整。
< meta name =viewportcontent =initial-scale = 1，maximum-scale = 1>
这告诉浏览器它应该放大页面，使得页面的1个CSS像素等于1 viewport像素（而不是例如视网膜显示器上的物理像素）。这会导致您的网页被放大，因为它比正常的移动屏幕更宽。 Maximum-scale还会告诉浏览器不要让页面进一步缩放。
< meta name =viewportcontent =width = 500，initial-scale = 1>
这告诉浏览器内容是500像素宽，你应该放大页面。 p>
I created this website with the original intention of having it be mobile. However I've had to take that function out and for the time being just wanted to have it so when you visit the site on a mobile device you just see the website as you would see on the screen. Not mobile friendly as you would want it to be but zoomed out so you can see the whole thing.
I've already placed in the code to make it behave the way I'd like it to but something is happening and it's not working. Ive looked into the HTML 5 shim and other options for the viewport but I can't figure it out.
I've tried a few different variations of the viewport tag
<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<meta name="viewport" content="width=500, initial-scale=1">
This is what the website looks like right now on mobile devices
This is what I was hoping to make it look like
Can you see what I'm missing?
In your case you should not use any of the suggested meta viewport tags. If you leave the page without any meta viewport tags you should get the desired result in most mobile browsers.
You could add <meta name="viewport" content="width=980"> to tell the browser that you content is 980 px, if that is the case. You seem to have a 960 px wide page but it may look nicer to have some spacing on the sides.
I find this to be a nice article to explain the meta viewport tag
And this is another article about using the meta viewport tag for non-responsive pages
The meta viewport tags that you have tried tells the browser a few different things:
<meta name="viewport" content="width=device-width" />
This tells the browser that content width should fit in the device width. In order to use this successfully your page width should be adjustable to the device.
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
This tells the browser that it should zoom the page so that 1 CSS pixel from the page equals 1 viewport pixel on the screen (not physical pixels on e.g. Retina displays). This results in your page being zoomed in as it is wider then a normal mobile screen. Maximum-scale also tells the browser not to let you zoom the page any further than that.
<meta name="viewport" content="width=500, initial-scale=1">
This tells the browser that the content is 500 px wide and that you should zoom the page.
这篇关于为什么我的网站在移动设备上关闭？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
