Css 如何确保我的引导布局在手机上的大小合适?

Css 如何确保我的引导布局在手机上的大小合适?,css,twitter-bootstrap,mobile,responsive-design,openlayers,Css,Twitter Bootstrap,Mobile,Responsive Design,Openlayers,我试图构建一个页面,上面有导航栏,下面有一个全屏的开放图层地图。还有一个页面外导航窗格,单击汉堡图示符时,该窗格会滑入 我在笔记本电脑屏幕上得到了我想要的布局,但当我在手机上查看时,导航栏和字体太小了。我是不是在引导过程中遗漏了一些东西?这是openlayers CSS的错吗 直播:试试这个: 您应用了正文{font size:80%;}。在media query中删除或写入菜单的类。这没有什么区别(至少在我的手机上没有)。看起来我手机上的Chrome不会触发(最大宽度:25em)条件。请检查

我试图构建一个页面,上面有导航栏,下面有一个全屏的开放图层地图。还有一个页面外导航窗格,单击汉堡图示符时,该窗格会滑入

我在笔记本电脑屏幕上得到了我想要的布局,但当我在手机上查看时,导航栏和字体太小了。我是不是在引导过程中遗漏了一些东西?这是openlayers CSS的错吗


直播:

试试这个:

您应用了
正文{font size:80%;}
。在media query中删除或写入菜单的类。

这没有什么区别(至少在我的手机上没有)。看起来我手机上的Chrome不会触发(最大宽度:25em)条件。请检查其他系统/手机-浏览器,也可以尝试Mozilla Firefox“响应设计”模式。根本原因似乎是我手机的DPI。导航条的渲染高度为50像素,就像在我的笔记本电脑上一样。如果我用的是鼠标,这就足够了,但对于1391px只覆盖几英寸的浏览器窗口来说,这太小了。我知道bootstrap应该处理这个问题;我想我只是设置了一些错误…这似乎是朝着正确方向迈出的一步: