响应式网站在移动设备上缩小到全宽 [英] Responsive website zoomed out to full width on mobile

问题描述

我正在测试 Bootstrap 响应性导航栏，并且我有一个 演示 网站.当我在桌面上调整浏览器的大小时，它一切正常，包括导航栏，它变成了可折叠菜单，顶部有一个小图标，我可以单击以查看更多菜单按钮.

I am testing out Bootstrap responsiveness navbar and I have a demo website. When I resize the browser on a desktop, it all works fine including the nav bar which become collapsible menu with a small icon on the top which I can click to see more menu buttons.

但是当我从移动浏览器尝试它时(我在 Android 上的 chrome 和互联网浏览器上尝试过)，我没有看到响应式设计.我只能看到非常小的桌面版本，比如网站.

But when I tried it from a mobile browser (I tried it on chrome and internet browser on an Android), I didn't see the responsive design. I could only see very small version of desktop like website.

谁能指出我做错了什么?

Could anyone point out what I am doing wrong?

推荐答案

将此添加到您的 HTML 头..

Add this to your HTML head..

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

这会告诉较小的设备浏览器如何缩放页面.您可以在此处阅读更多相关信息:https:///developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

This tells smaller device browsers how to scale the page. You can read more about this here: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

这篇关于响应式网站在移动设备上缩小到全宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！