移动设备上的固定宽边栏问题

Question

我为我所工作的宗教网站创建了一本HTML书。现在我正在尝试针对移动设备/平板电脑优化网站。目前我只是试图找出iPhone显示屏。基本上我有一个position:fixed边栏，其中包含一个菜单width:250px，还有一个主要内容div。在iPhone上查看它看起来很好，但文本最初太小，放大时，侧边栏包含太多的屏幕，请参见图像：

正如您所看到的，侧边栏与主要内容重叠并且继续缩放的次数也越多。我知道我可以设置user-scalable = no，但用户可以正确阅读内容。也试过@media查询，但似乎无法做到这一点。谢谢你的时间。