【发布时间】：2018-07-08 19:47:09
【问题描述】：
当我通过 Chrome 开发工具测试移动响应能力查看本地 Rails 应用程序时，一切正常。我通过 AWS 部署了我的代码，当我查看网站的 Web 版本时它也可以正常工作。只有当我在 iphone 或 ipad 上查看该网站时才会遇到问题。
当我向下滚动时，某些元素似乎卡在或卡在导航栏中。我在这里附上了截图。 I've attached a screenshot here:
我已尝试删除页面上的 svg 元素，因为这似乎是导致问题的元素，但没有奏效。
index.html.erb：
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarDiv" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Stephanie Dacre</a>
</div>
<div class="collapse navbar-collapse" id="navbarDiv">
<ul class="nav navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" href="#about" data-toggle="collapse" data-target=".navbar-collapse.show">About</a></li>
<li class="nav-item"><a class="nav-link" href="#work" data-toggle="collapse" data-target=".navbar-collapse.show">Work</a></li>
<li class="nav-item"><a class="nav-link" href="#connect" data-toggle="collapse" data-target=".navbar-collapse.show">Connect</a></li>
</ul>
</div>
</div>
</nav>
<div id="particles-js">
</div>
<h1 class="banner">Hi, my Name is Stephanie.<br>
I build websites.
</h1>
<div class ="container-fluid bg-white" id="about">
<h1 class="about title spin">About</h1>
<div class="row section-info">
<div class="col-xs-0 col-sm-0 col-md-1 col-lg-1 col-xl-1">
</div>
<div class="col-xs-12 col-sm-6 col-md-5 col-lg-5 col-xl-5 profile-desc">
<p class="profile-title icon"><%= image_tag ("codinphoto.png"), :class => "profile-icon"%> Me</p>
<span class="glyphicon glyphicon-menu-right"></span><span class="underline--magical"> I'm a full stack web developer located in Victoria BC.<br></span>
<span class="glyphicon glyphicon-menu-right"></span><span class="underline--magical"> I love Ruby on Rails, & UX/UI.<br></span>
<span class="glyphicon glyphicon-menu-right"></span><span class="underline--magical"> I also love running, cats, plants & coffee.<br></span>
<span class="glyphicon glyphicon-menu-right"></span><span class="underline--magical"> I'm currently looking for a full time position in a growth centric company.<br><br></span>
<span class="glyphicon glyphicon-heart-empty"></span><span class="underline--magical"> In the meantime, I'm freelancing!<br><li><a href="#connect">Lets create something together.</a></li><br></span>
</div>
<div class="col-xs-12 col-sm-6 col-md-5 col-lg-5 col-xl-5 icon" id="center">
<h1>Stack</h1>
<div class="skillBox wow bounceInLeft">
<p>HTML5</p>
<p>80%</p>
<div class="skill">
<div class="skill_level" style="width: 80%">
</div>
</div>
</div>
<div class="skillBox">
<p>CSS3</p>
<p>70%</p>
<div class="skill">
<div class="skill_level" style="width: 70%">
</div>
</div>
</div>
<div class="skillBox">
<p>Javascript & Jquery</p>
<p>60%</p>
<div class="skill">
<div class="skill_level" style="width: 60%">
</div>
</div>
</div>
<div class="skillBox">
<p>Ruby on Rails</p>
<p>75%</p>
<div class="skill">
<div class="skill_level" style="width: 75%">
</div>
</div>
</div>
<div class="skillBox">
<p>React</p>
<p>50%</p>
<div class="skill">
<div class="skill_level" style="width: 50%">
</div>
</div>
</div>
</div>
<div class="col-xs-0 col-sm-0 col-md-1 col-lg-1 col-xl-1">
</div>
</div>
</div>
<div class ="container-fluid bg-orange" id="work">
<h1 class="about title spin">Work</h1>
<div class="row section-info">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 card">
<%= image_tag ("card1.jpg"), :class => "card image"%>
<div class="middle">
<a href="http://www.chasecontractingltd.com/" target="_blank"><div class="text">Chase Contracting <span class="glyphicon glyphicon-new-window"></span></div></a>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 card">
<%= image_tag ("card2.jpg"), :class => "card image"%>
<div class="middle">
<a href="https://marineartbydale.com/" target="_blank"><div class="text">Marine Art by Dale <span class="glyphicon glyphicon-new-window"></span></div></a>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 card">
<%= image_tag ("card3.jpg"), :class => "card image"%>
<div class="middle">
<a href="https://elementalcolour.com/" target="_blank"><div class="text">Elemental Colour <span class="glyphicon glyphicon-new-window"></span></div></a>
</div>
</div>
<div class="row section-info">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 card">
<%= image_tag ("card4.jpg"), :class => "card image"%>
<div class="middle">
<a href="https://nogungang.com/" target="_blank"><div class="text">No Gun Gang <span class="glyphicon glyphicon-new-window"></span></div></a>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 card">
<%= image_tag ("card5.jpg"), :class => "card image"%>
<div class="text middle">COMING SOON
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 card">
<%= image_tag ("card6.jpg"), :class => "card image"%>
<div class="middle">
<a href="http://www.gledstoneupholstery.com/" target="_blank"><div class="text">Gledstone Upholstery <span class="glyphicon glyphicon-new-window"></span></div></a>
</div>
</div>
</div>
</div>
<div class ="container-fluid bg-white" id="connect">
<div class="title about spin">Connect
</div>
<div class="row section-info">
<div class="col-xs-0 col-sm-0 col-md-1 col-lg-1 col-xl-1">
</div>
<div class="collab col-xs-12 col-sm-6 col-md-5 col-lg-5 col-xl-5">Collaborations<br>
<span class="bigger">&</span> Questions
</div>
<div class="connect-info col-xs-12 col-sm-6 col-md-5 col-lg-5 col-xl-5">I am available for freelance projects and full-time employment.<br><br>
Stephanie Dacre<br>
<span class="glyphicon glyphicon-envelope"></span>: stephdacre@gmail.com<br>
<span class="glyphicon glyphicon-earphone"></span>: 250-505-4654<br>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="25px" height="25px" viewBox="0 0 114 114" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<polygon id="path-1" points="0 0 113.386 0 113.386 113.386 0 113.386"></polygon>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="instagram-glyph">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Shape"></g>
<path d="M100.136,47.884 L90.282,47.884 C91,50.671 91.424,53.583 91.424,56.594 C91.424,75.832 75.832,91.424 56.597,91.424 C37.363,91.424 21.77,75.832 21.77,56.594 C21.77,53.583 22.196,50.671 22.914,47.884 L13.059,47.884 L13.059,95.777 C13.059,98.178 15.009,100.127 17.417,100.127 L95.778,100.127 C96.9327527,100.128061 98.0406314,99.6703552 98.857915,98.8545719 C99.6751987,98.0387885 100.13494,96.9317527 100.136,95.777 L100.136,47.884 Z M100.136,17.411 C100.13547,16.2558088 99.6759948,15.1481565 98.8586824,14.3317819 C98.0413701,13.5154072 96.9331911,13.0572041 95.778,13.058 L82.72,13.058 C80.3157427,13.0579999 78.3665522,15.0067427 78.366,17.411 L78.366,30.474 C78.366,31.6286607 78.8247556,32.7360148 79.6413177,33.5523894 C80.4578799,34.368764 81.5653394,34.8272653 82.72,34.827 L95.778,34.827 C96.9331911,34.8277959 98.0413701,34.3695928 98.8586824,33.5532181 C99.6759948,32.7368435 100.13547,31.6291912 100.136,30.474 L100.136,17.411 Z M56.596,34.827 C44.573,34.827 34.828,44.571 34.828,56.594 C34.828,68.615 44.573,78.364 56.596,78.364 C68.619,78.364 78.366,68.615 78.366,56.594 C78.366,44.571 68.619,34.827 56.596,34.827 Z M100.136,113.192 L13.058,113.192 C5.847,113.192 -7.10542736e-15,107.343 -7.10542736e-15,100.126 L-7.10542736e-15,13.058 C-7.10542736e-15,5.846 5.847,-7.10542736e-15 13.058,-7.10542736e-15 L100.136,-7.10542736e-15 C107.348,-7.10542736e-15 113.194,5.846 113.194,13.058 L113.194,100.126 C113.193,107.343 107.348,113.192 100.136,113.192 Z" id="Shape" fill="#231F20" mask="url(#mask-2)"></path>
</g>
</g>
</svg>: @codingnomad<br>
</div>
<div class="col-xs-0 col-sm-0 col-md-1 col-lg-1 col-xl-1">
</div>
</div>
</div>
<div id="footer">
<div class="container">
<p class="text-muted credit">This site was built with <span class="glyphicon glyphicon-heart-empty"></span> & Rails by Stephanie Dacre</p>
</div>
</div>
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Codingnomad</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=EB+Garamond" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
</head>
<body>
<%= yield %>
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_include_tag 'application' %>
<%= stylesheet_link_tag 'style'%>
<%= javascript_include_tag 'particles', 'app'%>
</body>
</html>
宝石文件：
source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }
ruby '2.5.1'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.2.0'
# Use sqlite3 as the database for Active Record
# Use Puma as the app server
gem 'puma', '~> 3.11'
gem 'pg'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
gem 'bootstrap-sass'
gem 'bootstrap'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'mini_racer', platforms: :ruby
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
# Use ActiveStorage variant
# gem 'mini_magick', '~> 4.8'
# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development
# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.1.0', require: false
gem 'jquery-rails'
gem 'sprockets-rails', :require => 'sprockets/railtie'
group :development, :test do
# Call 'byebug' anywhere in the code to stop execution and get a debugger console
gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end
group :development do
# Access an interactive console on exception pages or by calling 'console' anywhere in the code.
gem 'web-console', '>= 3.3.0'
gem 'listen', '>= 3.0.5', '< 3.2'
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring'
gem 'spring-watcher-listen', '~> 2.0.0'
gem 'sqlite3'
end
group :test do
# Adds support for Capybara system testing and selenium driver
gem 'capybara', '>= 2.15', '< 4.0'
gem 'selenium-webdriver'
# Easy installation and use of chromedriver to run system tests with Chrome
gem 'chromedriver-helper'
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
应用程序.scss：
*= require_tree .
*= require_self
*/
@import "bootstrap-sprockets";
@import "bootstrap";
application.js：
//= require rails-ujs
//= require activestorage
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require_tree .
//= require particles.js
如果我需要提供更多信息，请告诉我。 谢谢！
【问题讨论】：
标签： ruby-on-rails twitter-bootstrap ruby-on-rails-5 navbar