响应式网站在手机上全长缩小

我正在testingBootstrap 3响应导航栏,我有一个演示网站。 当我调整桌面上的浏览器的大小,包括导航栏,这成为可折叠的菜单上面有一个小图标,我可以点击查看更多的菜单button的一切工作正常。

但是当我尝试从移动浏览器(我在Chrome浏览器和Chrome浏览器上试过)时,我没有看到响应式devise。 我只能看到非常小的桌面版本的网站。

任何人都可以指出我做错了什么?

2 Solutions collect form web for “响应式网站在手机上全长缩小”

将此添加到您的HTML头

<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

如这里所build议http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

 <meta name="viewport" content="initial-scale=1"> 

将会是一个更好的select,因为它可以自动缩放,因为它可以从纵向到横向,并返回一个更愉快的用户体验,因为/ height会自然采用。

  • Bootstrap中col-lg- *,col-md- *和col-sm- *有什么不同?
  • 为什么使用.h1而不是实际的h1?
  • 你如何使Twitter Bootstrap手风琴保持开放?
  • Bootstrap 3。容器中的stream体添加不需要的填充
  • Bootstrap 3将文本alignment到底部
  • Bootstrap图标在本地加载,但在线时不能加载
  • 如何以编程方式打开Bootstrap下拉菜单
  • 引导3:如何使下拉链接头在导航栏中可点击
  • twitter引导3 jquery最低版本
  • Twitter的Bootstrap响应背景图像内Div
  • input组 - 两个input彼此靠近