https://gyazo.com/5879a8f4528bcfb7bc5c8b5cd3f72dd1
上图是我测试网站时iphone的截图。 ^
https://gyazo.com/5c4ac3d0cef9b63a92f2649d8e00adba
上面的图片来自我的计算机chrome ^
代码
CSS3
https://github.com/oskaryil/dev-cafes/blob/master/public/assets/css/main.css#L40-L233
Html代码
<section class="header">
<div class="nav">
<div class="nav-left">
<a href="#" class="nav-title">Dev Cafés</a>
<a class="nav-location" href="#">
<i class="fa fa-map-marker" aria-hidden="true"></i>
Stockholm
</a>
</div>
<div class="nav-right">
<a class="nav-add">
<i class="fa fa-plus" aria-hidden="true"></i>
Add
</a>
</div>
</div>
</section>
<!-- focus from here -->
<section class="main">
<div class="cards">
<ul class="cards-list">
{{#each venues}}
<li class="cards-list-item">
<a href="#" class="cards-link">
<div class="cards-header-info">
<div class="cards-header">
{{#if image}}
<img class="blur" src="{{image}}" />
{{else}}
<div class="cards-header-bg">
</div>
{{/if}}
<p class="cards-header-p">
{{name}}, {{adress}}
</p>
</div>
<!-- to here -->
<div class="cards-info">
<p>
{{description}}
</p>
{{#if options.wifi}}
<i class="fa fa-wifi availability-icon" data-option="on" aria-hidden="true"></i>
{{else}}
<i class="fa fa-wifi availability-icon" data-option="off" aria-hidden="true"></i>
{{/if}}
{{#if options.toilet}}
<svg version="1.1" class="toilet-icon availability-icon" y="0" x="0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" xmlns:xlink="http://www.w3.org/1999/xlink" data-option="on">
<g>
<g>
<path d="M146.645,109.31c-54.918,0-55.673,0-101.357,0c-24.466,0-44.468,19.904-44.591,44.367L0,292.109
c-0.052,10.407,8.342,18.885,18.747,18.938c0.032,0,0.065,0,0.098,0c10.363,0,18.787-8.375,18.841-18.747l0.696-138.432
c0-0.016,0-0.031,0-0.047c0.024-2.055,1.704-3.706,3.759-3.694c2.055,0.012,3.715,1.683,3.715,3.738l0.008,316.757
c0,12.488,10.124,22.612,22.612,22.612s22.612-10.124,22.612-22.612V289.888h9.763v180.734c0,12.488,10.123,22.611,22.611,22.611
s22.611-10.123,22.611-22.611c0-298.894-0.4-127.966-0.41-316.481c0-2.121,1.674-3.863,3.794-3.946
c2.12-0.083,3.928,1.521,4.092,3.635c0,0.001,0,0.002,0,0.002l-0.128,138.354c-0.01,10.406,8.419,18.851,18.825,18.861
c0.007,0,0.011,0,0.018,0c10.397,0,18.833-8.426,18.842-18.825l0.128-138.431c0.002-0.039,0.002-0.075,0.001-0.114
C191.112,129.214,171.109,109.31,146.645,109.31z"/>
</g>
</g>
<g>
<g>
<circle cx="95.966" cy="57.813" r="39.047"/>
</g>
</g>
<g>
<g>
<path d="M510.941,262.849c-0.346-0.986-34.611-98.717-40.002-114.406c-8.679-25.253-23.23-38.057-43.249-38.057
c-28.025,0-37.18,0-65.153,0c-20.02,0-34.571,12.805-43.249,38.057c-5.391,15.688-39.656,113.421-40.002,114.406
c-3.418,9.748,1.714,20.423,11.464,23.841c9.758,3.42,20.425-1.725,23.84-11.462c1.106-3.154,21.721-60.433,33.222-93.389
c-1.204,9.838,2.264-10.578-26.737,139.154c-1.246,6.431,3.711,12.379,10.201,12.379c4.029,0,8.862,0,14.273,0v135.678
c0,12.396,10.049,22.446,22.446,22.446c12.397,0,22.446-10.049,22.446-22.446v-135.68c3.227,0,6.465,0,9.692,0v135.68
c0,12.396,10.049,22.446,22.446,22.446c12.397,0,22.446-10.049,22.446-22.446v-135.68c5.411,0,10.245,0,14.273,0
c6.522,0,11.446-5.952,10.201-12.379c-28.737-148.369-25.57-131.138-26.55-139.154c11.593,33.211,31.602,90.284,32.691,93.389
c3.421,9.756,14.101,14.878,23.84,11.462C509.227,283.27,514.359,272.597,510.941,262.849z"/>
</g>
</g>
<g>
<g>
<circle cx="395.283" cy="59.265" r="38.767"/>
</g>
</g>
<g>
<g>
<path d="M239.761,43.925c-7.969,0-14.43,6.46-14.43,14.43v395.282c0,7.969,6.46,14.429,14.43,14.429
c7.97,0,14.43-6.459,14.43-14.429V58.355C254.191,50.385,247.73,43.925,239.761,43.925z"/>
</svg>
{{else}}
<svg version="1.1" class="toilet-icon availability-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" data-option="off">
<g>
<g>
<path d="M146.645,109.31c-54.918,0-55.673,0-101.357,0c-24.466,0-44.468,19.904-44.591,44.367L0,292.109
c-0.052,10.407,8.342,18.885,18.747,18.938c0.032,0,0.065,0,0.098,0c10.363,0,18.787-8.375,18.841-18.747l0.696-138.432
c0-0.016,0-0.031,0-0.047c0.024-2.055,1.704-3.706,3.759-3.694c2.055,0.012,3.715,1.683,3.715,3.738l0.008,316.757
c0,12.488,10.124,22.612,22.612,22.612s22.612-10.124,22.612-22.612V289.888h9.763v180.734c0,12.488,10.123,22.611,22.611,22.611
s22.611-10.123,22.611-22.611c0-298.894-0.4-127.966-0.41-316.481c0-2.121,1.674-3.863,3.794-3.946
c2.12-0.083,3.928,1.521,4.092,3.635c0,0.001,0,0.002,0,0.002l-0.128,138.354c-0.01,10.406,8.419,18.851,18.825,18.861
c0.007,0,0.011,0,0.018,0c10.397,0,18.833-8.426,18.842-18.825l0.128-138.431c0.002-0.039,0.002-0.075,0.001-0.114
C191.112,129.214,171.109,109.31,146.645,109.31z"/>
</g>
</g>
<g>
<g>
<circle cx="95.966" cy="57.813" r="39.047"/>
</g>
</g>
<g>
<g>
<path d="M510.941,262.849c-0.346-0.986-34.611-98.717-40.002-114.406c-8.679-25.253-23.23-38.057-43.249-38.057
c-28.025,0-37.18,0-65.153,0c-20.02,0-34.571,12.805-43.249,38.057c-5.391,15.688-39.656,113.421-40.002,114.406
c-3.418,9.748,1.714,20.423,11.464,23.841c9.758,3.42,20.425-1.725,23.84-11.462c1.106-3.154,21.721-60.433,33.222-93.389
c-1.204,9.838,2.264-10.578-26.737,139.154c-1.246,6.431,3.711,12.379,10.201,12.379c4.029,0,8.862,0,14.273,0v135.678
c0,12.396,10.049,22.446,22.446,22.446c12.397,0,22.446-10.049,22.446-22.446v-135.68c3.227,0,6.465,0,9.692,0v135.68
c0,12.396,10.049,22.446,22.446,22.446c12.397,0,22.446-10.049,22.446-22.446v-135.68c5.411,0,10.245,0,14.273,0
c6.522,0,11.446-5.952,10.201-12.379c-28.737-148.369-25.57-131.138-26.55-139.154c11.593,33.211,31.602,90.284,32.691,93.389
c3.421,9.756,14.101,14.878,23.84,11.462C509.227,283.27,514.359,272.597,510.941,262.849z"/>
</g>
</g>
<g>
<g>
<circle cx="395.283" cy="59.265" r="38.767"/>
</g>
</g>
<g>
<g>
<path d="M239.761,43.925c-7.969,0-14.43,6.46-14.43,14.43v395.282c0,7.969,6.46,14.429,14.43,14.429
c7.97,0,14.43-6.459,14.43-14.429V58.355C254.191,50.385,247.73,43.925,239.761,43.925z"/>
</svg>
{{/if}}
</div>
</div>
</a>
</li>
{{/each}}
</ul>
</div>
</section>
将数据发送到把手的JSON对象
module.exports = [
{
name: 'Starbucks Stureplan',
adress: 'Kungsgatan 2',
description: 'Very nice place with good drinks and good wifi with nice service.',
options: {
wifi: true,
toilet: true
},
//this is the image
image: "https://s-media-cache-ak0.pinimg.com/originals/8f/5f/d0/8f5fd07d1034e0d4941c4ad9d58ec055.jpg"
},
{
name: 'Starbucks Fenix',
adress: 'Kungsgatan 2',
description: 'Very nice place with good drinks and good wifi with nice service.',
options: {
wifi: true,
toilet: true
}
}
]
请注意，这是移动优先方法
解决这个问题的一件事是，如果你删除图片，但我需要图片。此外，它不可能在css中将其作为背景，因为那时使用把手的重点消失了。
您可以通过设置＆＃34; margin-top：130px＆＃34;来修复它。在＆＃34;主要＆＃34;部分，但是当你在android上使用它时，＆＃34; main＆＃34;部分将比导航栏低130px。
我真的不明白为什么会出现这个问题。
答案 0 :(得分：0)
网站本身在chrome中运行良好，但在safari中运行不正常，因此您可以检测特定的navigator.userAgent并修改元素和css。
if (navigator.userAgent.indexOf("Safari") != -1 &&
navigator.userAgent.indexOf("Chrome") == -1) {
$("h1").addClass("safari");
}
我为你做了一个小提琴
https://jsfiddle.net/01obbpwv/1/
编辑：忘了将jQuery添加到小提琴中。
答案 1 :(得分：0)
我在没有使用js的情况下解决了它，你必须将img标签包装在另一个div中，如下所示：
<div class="child-img">
{{#if image}}
<img class="blur" src="{{image}}" />
{{else}}
<div class="cards-header-bg">
</div>
{{/if}}
</div>
解决了它，然后在这种情况下你将display: inherit;放在css中！