我有一個特定于 iOS 手機的問題，或者在我看來是這樣。
我支持一個網站Autumna.co.uk。一切都很好，除了從 iOS 手機運行時（我不知道 iPad）主頁上的搜索影像按鈕沒有顯示（它們顯示大約 20 分之一的重繪 ）。iPhone 上的瀏覽??器沒有區別（我嘗試過 safari、chrome 和 firefox）。他們在 Android 手機上作業，通過瀏覽器（包括 MacBook）在 PC 上作業。
影像最初是隱藏的，JS 將顯示那些應該顯示的影像。它們都應該顯示在主頁上。
有什么關于 iPhone 的具體問題我需要考慮導致影像不顯示。
html的相關部分如下：
<div class="row search-service-type-btns" style="display: flex;">
<script>
var initial_service_type = ""
var is_brand = false
</script>
<div >
<input type="radio" id="radioCareHome" name="service_type" value="service_care_home" checked="">
<label for="radioCareHome"><img src="https://cdn.autumna.co.uk/prod/static/img/search/care-homes-selector-box.07a043b18e60.png" alt="iOS 移動版未顯示我網站中的某些影像"></label>
</div>
<div >
<input type="radio" id="radioHomeCare" name="service_type" value="service_home_care">
<label for="radioHomeCare"><img src="https://cdn.autumna.co.uk/prod/static/img/search/home-care-selector-box.79290d9e4862.png" alt="iOS 移動版未顯示我網站中的某些影像"></label>
</div>
<div >
<input type="radio" id="radioLiveInCare" name="service_type" value="service_live_in_care">
<label for="radioLiveInCare"><img src="https://cdn.autumna.co.uk/prod/static/img/search/live-in-care-selector-box.ee30e9164992.png" alt="iOS 移動版未顯示我網站中的某些影像"></label>
</div>
<div >
<input type="radio" id="radioRetirementVillage" name="service_type" value="service_retirement_village">
<label for="radioRetirementVillage"><img src="https://cdn.autumna.co.uk/prod/static/img/search/retirement-living-selector-box.abf50719d5ee.png" alt="iOS 移動版未顯示我網站中的某些影像"></label>
</div>
</div>
<div id="search-tabs" style="background-color: rgb(38, 79, 84);">
<div id="myTabContent">
<div id="home" role="tabpanel" aria-labelledby="home-tab">
<div >
<div >
<div >
<input type="text" name="search" maxlength="128" title="Search" placeholder="Enter Location or Postcode" required="" id="id_location_search" value="" itemprop="query-input">
</div>
<div id="location-search-autocomplete-results"></div>
</div>
<div >
<button type="submit" >Search</button>
</div>
</div>
</div>
<div id="profile" role="tabpanel" aria-labelledby="profile-tab">
<div >
<div >
<div >
<input type="text" name="organisation_search" maxlength="128" title="Search" placeholder="Enter Service or Provider name" id="id_search">
</div>
<div id="search-autocomplete-results"></div>
</div>
</div>
</div>
</div>
<ul id="myTab" role="tablist" style="display: flex;">
<li >
<a id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true" style="background-color: rgb(38, 79, 84); border-color: rgb(38, 79, 84);">Search by Location</a>
</li>
<li >
<a id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Search by Service or Provider name</a>
</li>
</ul>
</div>
<div id="other_service" style="display: none;">
<div >
<div >
<div style="text-align: left">
<p >
<strong>
Not sure what you need?
</strong>
</p>
<p>
We know it's an emotional, confusing and costly decision to make. We can help you make an informed decision and the best choices.
</p>
</div>
</div>
<div >
<a href="/free-advice-lines/care-advice" >Find out</a>
</div>
</div>
</div>
<div id="not_sure_div" style="display: block;">
<input type="radio" id="radioOther" name="service_type" value="service_other" style="display:none">
<label for="radioOther"><img src="https://cdn.autumna.co.uk/prod/static/img/not-sure-icon.c8f114c682bb.png" style="display:initial"> Not Sure what care you need?</label>
<!--<a href="/search/safe" style="color:white">Safe Badge</a>-->
</div>
廣告 js
'use strict';
var searchBoxColor = '#264F54'
var inactiveColor = '#cccccc'
function change_care_type (obj) {
if (obj == "service_home_care") {
searchBoxColor = '#1FA18F'
$('#search-tabs').show()
$('#other_service').hide()
}
else if (obj == "service_live_in_care") {
searchBoxColor = '#FFC700'
$('#search-tabs').show()
$('#other_service').hide()
}
else if (obj == "service_retirement_village") {
searchBoxColor = '#ABB5B5'
$('#search-tabs').show()
$('#other_service').hide()
}
else if (obj == "service_other") {
searchBoxColor = '#ABB5B5'
$('#other_service').show()
$('#search-tabs').hide()
}
else {
searchBoxColor = '#264F54'
$('#search-tabs').show()
$('#other_service').hide()
}
$('#search-tabs').css('background-color', searchBoxColor)
$('.nav-link.active.search-by').css('background-color',searchBoxColor)
$('.nav-link.active.search-by').css('border-color',searchBoxColor)
}
$('.nav-link.search-by').click(function (){
if (! $(this).hasClass('active')) {
$('.nav-link.search-by').css('background-color', searchBoxColor)
$('.nav-link.search-by').css('border-color', searchBoxColor)
$('#search-tabs').css('background-color', searchBoxColor)
$('.nav-link.active.search-by').css('background-color',inactiveColor)
$('.nav-link.active.search-by').css('border-color',inactiveColor)
}
})
$("input[name='service_type']").change(function(){
change_care_type($(this).val());
});
$(document).ready(function () {
change_care_type(initial_service_type);
if (window.location.pathname == '/' ){
// Not home page
$('.search-service-type-btns').css('display','flex')
$('.not-sure-div').css('display','block')
}
if (!is_brand) {
$('#myTab').css('display','flex')
} else {
//$('.search-service-type-btns').css('display','flex')
$('#search-tabs').css('background-color', inactiveColor)
}
})
// Get the header
var header = document.getElementById("filter-container");
// Get the offset position of the navbar
var sticky = 660;
// When the user scrolls the page, execute myFunction
$(function(){
$(window).scroll(function() {
try {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
catch (err){
}
});
});
uj5u.com熱心網友回復：
您的 CSS 確實在螢屏上啟用了寬度 < 768px 的搜索按鈕，默認情況下：
.search-service-type-btns {
display: none;
}
僅當螢屏大于 768 時才顯示為無。您可以通過以下方式進行測驗：
- 在 iPhone 豎屏上加載頁面 -> 只有一個搜索按鈕
- 在 iPhone 橫屏上加載頁面 -> 所有搜索按鈕
您必須查看媒體特定的定義，例如：
@media only screen and (min-width: 576px) and (max-width :1366px)
并為較小的寬度添加一個
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/354733.html
標籤：javascript ios