Rails 5.1.5集成Bootstrap3.3.6应用无viewport，首页未登录时不响应

First, let's break down why manually adding the viewport tag fixes things: Bootstrap 3.3.6 depends entirely on the <meta name="viewport"> tag to trigger its responsive behavior. Without it, mobile browsers will render your page at a desktop-sized width (usually 980px) and scale it down, which completely breaks Bootstrap's grid system and media queries.

Solutions Tailored to Your Setup #

• Check your main application layout
  Open app/views/layouts/application.html.erb and look inside the <head> section. Rails 5.1 should include the viewport tag by default, but if it's missing, add this line:

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

  This ensures all views that inherit from the application layout get the tag automatically.

• Fix the custom homepage template
  Since your unlogged homepage uses a custom template that doesn't inherit from the main layout, you'll need to add the viewport tag directly to this template's <head> section:

  1. Locate the custom layout or view file for your homepage (e.g., app/views/layouts/home.html.erb or the inline <head> in your homepage view).
  2. Insert the same viewport meta tag as above into its <head> block.

• Verify the fix
  Restart your Rails server, then use your browser's developer tools (F12) to simulate mobile devices. You should see Bootstrap's grid adjust to the screen width now. You can also test directly on a mobile device to confirm everything works as expected.

Just double-check you didn't mistype the tag content—width=device-width is the critical part that tells browsers to match the screen's actual width, and initial-scale=1.0 ensures no unwanted zoom on page load.

内容的提问来源于stack exchange，提问作者Olliedee