html - 元内容设备宽度影响图像它使列内的图像不清晰
问题描述
在我的网站上添加此行以使导航栏响应后,它使列内的图像在手机屏幕中不清晰。检查两张图片以了解更多我的意思! 当我从元数据中删除 name="viewport" 时,照片看起来很清晰。
我怎样才能解决这个问题?我需要照片清晰,我需要添加这个 name="viewport" 以便我的网站能够响应!
这是我的代码
<meta content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.topnav {
overflow: hidden;
margin-top: 40px;
}
.topnav a {
float: left;
display: block;
color: #555555;
text-align: center;
text-decoration: none;
font-size: 1em;
padding: 8px 15px;
text-transform: uppercase;
}
.topnav a:hover {
background-color: #fcfdfc;
}
.topnav a.active {
color: #00405d;
}
.topnav .icon {
display: none;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.logo img {
width: 100px;
}
}
</style>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-54517731358aab10" async="async"></script>
<div class="header-top">
<div class="wrap">
<p><%= image_tag "2.png" %> FREE SHIPPING on orders over CAD $150</p>
<div class="clear"></div>
</div>
</div>
<div class="topnav" id="myTopnav">
<div class="header-bottom">
<div class="wrap">
<div class="header-bottom-left">
<div class="logo">
<%= link_to root_path do %><%= image_tag "twinkledreamslogo.png" %><% end %>
</div>
<%= link_to "Home",root_path, class: "active" %>
<%= link_to "Shop",teethers_path %>
<%= link_to "Baby", baby_path %>
<%= link_to "reviews", reviews_path %>
<%= link_to "Contact",new_contact_path,class: "color7"%>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div class="header-bottom-right">
<div class="search">
<%= form_for "",url: teethers_path, role: "search", method: :get ,class: "textbox" do %>
<%= text_field_tag :search, @search_term,value: "Search", onfocus: "this.value = '';" ,onblur: "if (this.value == '') {this.value = 'Search';}" %>
<input type="submit" value="Subscribe" id="submit" name="submit">
<% end %>
<div id="response"> </div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div> </div>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner fwslider">
<div class="item active">
<div class="row">
<div class="col-md-6 col-sm-3 col-xs-3 col-lg-3">
<%= image_tag "mirabel.jpg",style: "height: 400px;"%>
</div>
<div class="col-md-6 col-sm-3 col-xs-3 col-lg-3">
<%= image_tag "icecream.jpg",alt: "icecream baby custom teether",style: "height: 400px;"%>
</div>
<div class="col-md-6 col-sm-3 col-xs-3 col-lg-3">
<%= image_tag "giancarlo1.jpg",style: "height: 400px;"%>
</div>
<div class="col-md-6 col-sm-3 col-xs-3 col-lg-3">
<%= image_tag "elephant.png",alt: "elephant baby custom teether",style: "height: 400px;"%>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-3 col-lg-3">
<%= image_tag "robbie.jpg",style: "height: 400px;"%>
</div>
<div class="col-md-3 col-sm-3 col-xs-3 col-lg-3">
<%= image_tag "elephant2.jpg",alt: "elephant baby custom teether",style: "height: 400px;"%>
</div>
<div class="col-md-3 col-sm-3 col-xs-3 col-lg-3">
<%= image_tag "isa.jpg",style: "height: 400px;"%>
</div>
<div class="col-md-3 col-sm-3 col-xs-3 col-lg-3">
<%= image_tag "oreo.jpg",alt: "oreo baby custom teether",style: "height: 400px;"%>
</div>
</div>
</div>
</div>
解决方案
推荐阅读
- flutter - Flutter 从自动完成获取城市,国家
- arangodb - How to filter documents in a collection when inside an array in Arangodb?
- javascript - 当用户输入一个新单词时如何使javascript自动完成重置?
- python - 我的陈述不起作用,我不知道为什么
- arrays - 在 Angular 上执行 GET 请求时出现此错误:找不到不同的支持对象 '[object Object]
- reactjs - 无法从 Firestore 集合中获取数据
- ruby-on-rails - Rails 的多个数据库不适用于远程数据库
- swift - SwiftUI x Firebase - 在执行代码之前无法等待 Firebase 结果
- reactjs - 无效的钩子调用 - React JS
- javascript - 使用 javascript 或 jquery 将 Html 非表单数据转换为 JSON