第一次在stackoverflow上发帖。我实际上已经解决了我的问题，但我只是不明白为什么。
所以我从另一个网站“借用”了以下媒体查询，它们运行良好：
==== Tablet Size ====
@media (min-device-width:1024px) and (max-width:989px),
screen and (max-device-width:480px), screen
and (min-device-width : 768px) and (max-device-width : 1024px),
(min-device-width:481px) and (max-device-width:1024px) and (orientation:portrait){
/* Content */
}
==== Phone Size ====
@media (min-device-width:1024px) and (max-width:509px), (max-device-width:480px) and
(orientation:portrait), screen
and (min-device-width : 320px) and (max-device-width : 480px){
/* Content */
}
以下媒体查询是/是我尝试简化代码并消除我可能有的任何重叠。它没有成功。问题出在设备上。（我只在手机上检查过）以下查询可以很好地调整浏览器的大小，但在设备上却很糟糕。我已将 body/wrapper 的宽度设置为 100%，但在手机上它显示的尺寸约为设备宽度的 20%。
==== Tablet =====
@media (min-device-width:1024px) and (max-width:989px),
screen and (min-device-width : 768px) and (max-device-width : 1024px),
(min-device-width:481px) and (max-device-width:1024px) and (orientation:portrait){
/* Content */
}
Phone:
@media (min-device-width:1024px) and (max-width:509px), screen
and (min-device-width : 320px) and (max-device-width : 480px){
/* Content */
}
有什么线索吗？可能是一些简单的事情。我还将接受任何媒体查询提示或建议。我正在将我公司的网站全部移动到移动设备上，并尝试设置一个查询以包含所有平板电脑，然后再为所有手机设置一个查询。
谢谢您的帮助！