我有一个主要面向移动设备的网站，但不仅适用于他们。
我已经使用了 RWD 方法。 我在css中使用百分比值（没有硬编码px）和我甚至用JavaScript扩展字体大小，所以结果总是一样的，无论屏幕尺寸如何 - 在Android手机，iPhone，iPad上...... - 看起来不错（菜单宽度为100％，高度保持比例，文字也可见）。
但是，当我在我的电脑上预览该网站时（使用24英寸屏幕），它看起来就像是噩梦。一切仍然保持比例等，但在如此大的屏幕上（与iPhone / iPad相比），它看起来很糟糕（5x5厘米大小的菜单按钮......）。
我想以某种方式停止扩展元素的大小。
请注意，以像素为单位的max-width/max-height 不是解决方案。这是因为一些移动设备具有很高的px分辨率，而且屏幕非常小（与24英寸相比）。同时，我可以将我的显示器（24''）转换为800x600分辨率。所以px分辨率对屏幕大小说“ ”（只是为了澄清它）。
我将使用的图像：max-width: 900px并解决了PC的问题。但是现在我尝试将网站呈现在小（低于18英寸）的屏幕上，其分辨率大于900px。我的菜单已按比例缩小（当我希望它在小屏幕的情况下填充整个宽度时）。
现实生活中的例子：
当菜单按钮大约5厘米时看起来没问题，我有5个按钮并且每个按钮给它们20％的宽度（所以顶部菜单是全宽的）。当屏幕很大时，我希望左/右边距和菜单居中，按钮大约不超过5厘米。
我可以使用媒体查询或css最大宽度，如max-width: 800px和我的屏幕（24'，1920x1080），然后按钮不会大于5厘米。
精细。现在有人在三星Galaxy Note Edge上运行我的网站，它的屏幕大小约为6x3，但分辨率为1600x2560px。我的菜单按钮突然很小，我甚至看不到它（当我使用基于px的max-width时）。
此外，我不能依赖CSS cm单位。他们已经做了一些关于dpi的假设，它在PC Windows 7上看起来很好（例如），但在我的HTC Android上（另一个例子）1x1cm框与1x1cm框不同（和没有涉及扩展）。
那么 - 如何应对呢？
我基本上想要ie：使我的按钮占据屏幕宽度的20％（我将在屏幕上放置5个这样的按钮作为顶部菜单），但如果屏幕大于18''，我想要停止扩展它（会出现一些边缘空间，但无论如何）。无论px分辨率如何，它都是绝对的。
答案 0 :(得分：0)
您使用的是标头标记：<meta name="viewport" content="initial-scale=1.0, width=device-width" />吗？
width：设备虚拟视口的宽度。
设备宽度：设备屏幕的物理宽度。
高度：＆＃34;虚拟视口的高度＆＃34;该设备。
设备高度：设备屏幕的物理高度。
initial-scale：访问页面时的初始缩放。 1.0不缩放。
最小比例：访问者可以在页面上缩放的最小数量。 1.0不缩放。
最大比例：访问者可以在页面上缩放的最大数量。 1.0不缩放。
用户可扩展：允许设备放大和缩小。值是或否。