Question

刚设计了一个响应式网站（www.atdrive.com），它的屏幕工作非常精细，分辨率更高，但是......它不适用于分辨率较小的小型设备
像智能手机和平板手机一样，它们的屏幕更小但分辨率更高..为了更好地定义hava，请查看从不同仿真器设备中截取的一些屏幕截图

三星Galaxy标签2 || 正常工作

enter image description here

三星Galaxy Note 2 || 正常工作 enter image description here

iPhone || 工作不正常

enter image description here

相同的

enter image description here

三星Galaxy S || 正常工作 enter image description here

正如你可以看到网站向左移动，我没有得到任何线索如何解决它，我尝试应用视口但它没有工作我的css是：

@media only screen and (min-width: 480px) and (max-width: 619px)
@media only screen and (min-width: 320px) and (max-width: 479px)
@media only screen and (min-width: 250px) and (max-width: 319px)
@media only screen and (max-width: 249px)

因此，请提出一些建议，或者如果您遇到任何类似的问题 visit atdrive

Answer 1

默认情况下，Iphone会缩放您的网页。

添加此代码： -

<meta name="viewport" content="width=device-width" />

Answer 2

尝试将此chrome扩展程序与chrome开发人员工具一起使用

https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh

Answer 3

尝试使用此meta标记来代替您的视口meta标记

<meta name="viewport" content="width=1170, user-scalable=no">

在此元标记中放置"width = your website width"

响应式设计不适用于较小的设备

3 个答案: