如何在非响应式移动网站上设置视口？ [英] How to set the viewport on a non-responsive mobile site?

问题描述

我的样式是一个无响应的网站，在移动视图中有问题。我没有视口设置。我假设内容应该在移动设备上显示，就像在桌面上放大一样。

以下是我的问题视图：

说明：

当在桌面上查看是很好。在iPhone（移动）上，标题，导航和页脚的宽度收缩（见图像），主要内容本质上延伸到手机视图框架（或视口或任何）...

谢谢！

解决方案

如果您的网站没有响应，将有助于设置视口。在您的网络浏览器中打开网站，找到导致您的设计不会中断的最小宽度。然后在标题中使用以下元标记，将 width 替换为您希望网站显示的最小宽度。

 < meta name =viewportcontent =width = 1024> 
 

元视口标记告诉浏览器它应该使网页的宽度不同于默认值。例如，

I am styling a non-responsive website and having issues in mobile views. I have no viewport set. I assume content should appear the same on mobile as it does on desktop only zoomed out.

Here is a visual of my issue:

Explanation:

When viewing on desktop it is fine. On iPhone (mobile) the header, nav and footer's widths shrink (see image) and the main content essentially extends beyond the phone viewframe (or viewport or whatever)...

Thanks!

解决方案

If your site is not responsive, it will help to set a viewport. Open up the site in your web browser and find the minimum width that causes your design to not break. Then use the following meta tag in your header, replacing width with the minimum width you want your site to show at.

<meta name="viewport" content="width=1024">

The meta viewport tag tells the browser that it should render the web page at a different width than the default. For instance, the default viewport size for Safari iOS is 980px, which means that for web pages without a meta viewport tag, the body will be rendered 980px wide. By specifying a meta viewport tag with a width of 1024, the body will be rendered at 1024px wide instead.

To illustrate, here's an example of a website that has a main div with a width of 590px, how it renders at the default viewport size of 980x, and how it renders when a custom viewport width of 590px is specified using the meta viewport tag:

Details on the viewport meta tag:
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

这篇关于如何在非响应式移动网站上设置视口？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！