Responsive design 响应视口-不在平板电脑上工作

我有一个1070像素宽的网站。我正在使用以下视口标记

<meta name="viewport" width="1070" content="initial-scale=1" >

如果我理解正确，这将在任何设备上完整显示页面。但是如果我尝试在平板电脑上查看页面，页面总是需要缩小

---

有人需要帮助吗？

视口是显示网站的虚拟区域，如果设置width=“1070”，平板电脑每行仅使用1070像素来显示网站。因此，如果平板电脑的宽度小于1070，则需要缩小以显示整个页面

如果您希望平板电脑完整显示页面，请使用

content=“width=device width，initial scale=1.0”

，然后无论您的网站有多宽，它都会填满屏幕。

试试这个

<meta name="viewport" content="width=1070, target-densitydpi=device-dpi"/>

使用

您告诉设备的视口为1070像素

“如果我理解正确，这将显示完全打开的页面 任何设备。但如果我尝试在平板电脑上查看页面，页面总是 需要缩小。”

否，您告诉设备以1070显示，因此必须缩小（假设平板电脑处于纵向模式）

你的网站是否有响应能力？你的突破点是什么？还是静止在1070？如果您的站点针对移动查看进行了优化（响应），那么您可以使用

典型的移动优化站点包含以下内容：

进一步阅读：

“宽度”属性控制视口的大小。它可以设置为特定数量的像素，如宽度=600，或设置为特殊值设备宽度值，即屏幕宽度（CSS像素），比例为100%。（有相应的高度值和设备高度值，这些值对于包含根据视口高度更改大小或位置的元素的页面可能很有用。）

“初始比例”属性控制首次加载页面时的缩放级别。“最大比例”、“最小比例”和“用户可缩放”属性控制允许用户放大或缩小页面的方式

---

iPhone和许多流行的Android手机都有3-4英寸（7-10厘米）屏幕，320-480像素（约160 dpi）。Firefox for Maemo在诺基亚N900上运行，诺基亚N900的物理尺寸相同，但有480-800像素（~240 dpi）。因此，Fennec的最新版本显示了比iPhone或Android小三分之一（实际大小）的页面。这导致了许多触摸优化网站的可用性和可读性问题。彼得·保罗·科赫（Peter Paul Koch）在《像素不是像素不是像素》（pixel is not A pixel is not A pixel A pixel not A pixel）一书中写到了这个问题。

试试看吧，这与我想要实现的目标完全相反？这就是我所使用的，适用于每台设备。

<meta name="viewport" content="width=device-width, initial-scale=1">