CSS Media Query 無法與 iPad 裝置配合使用

Question

我正在尝试创建一些文本，这些文本将在移动设备上显示415px的一些文本，而在iPad上显示768px，它将显示不同的文本。 问题是iPhone的文本也显示在Ipad上，而Ipad文本根本不显示，我需要一些帮助，所以我可以在Ipad设备上显示我创建的文本，而在iPhone设备上它会显示iPhone文本，因为我已经为此苦苦挣扎了很长时间，但仍然无法解决这个问题。 谢谢。

body{
background: grey;
height: 900px;
}
.webdev{
width: 100%;
height: 350px;
background-repeat: no-repeat;
background-size: cover;
background: rgb(140, 253, 191);
}
.txt1{
position: absolute;
bottom: 88%;
left: 5%;
color: red;
font-size: 35px;
text-transform: uppercase;
font-weight: 980;
}
.ipadtext1{
color: black;
font-size: 45px;
text-transform: uppercase;
font-weight: 980;
}
.txt2{
position: absolute;
bottom: 82%;
left: 5%;
color: red;
font-size: 35px;
text-transform: uppercase;
font-weight: 980;
}
.ipadtext2{
color: black;
font-size: 45px;
text-transform: uppercase;
font-weight: 980;
}
.ipadtext3{
color: black;
font-size: 45px;
text-transform: uppercase;
font-weight: 980;
}
.txt3{
position: absolute;
bottom: 76%;
left: 5%;
color: red;
font-size: 35px;
text-transform: uppercase;
font-weight: 980;
}
.ipadhireme{
font-size: 19px;
text-transform: uppercase;
padding: 18px;
background-color: black;
padding-left: 35px;
padding-right: 35px;
letter-spacing: 1px;
transition: .3s ease-in-out;
color: white;
}
.ipadhireme a{
text-decoration: none;
color: white;
}
.ipadhireme:hover{
background-color: red;
color: white;
}
.hireme{
position: absolute;
bottom: 68%;
left: 5%;
font-size: 19px;
text-transform: uppercase;
padding: 18px;
background-color: yellow;
padding-left: 35px;
padding-right: 35px;
letter-spacing: 1px;
transition: .3s ease-in-out;
color: black;
}
.hireme a{
text-decoration: none;
color: white;
}
.hireme:hover{
background-color: red;
color: black;
}
.ipadtext1,.ipadtext2,.ipadtext3,.ipadhireme{
display: none;
}
@media screen and (max-width: 415px) {
.webdev{
height: 300px;
}
.txt1,.txt2,.txt3,.hireme{
display: block;
}
.ipadtext1,.ipadtext2,.ipadtext3,.ipadhireme{
display: none;
}
.hireme{
position: absolute;
bottom: 59%;
}
.txt1,.txt2,.txt3{
font-size: 30px;
}
.txt1{
}
.txt2{
}
.txt3{
}
}
}
@media screen and (max-width: 768px) {
.ipadwebdev{
height: 65%;
}
.txt1,.txt2,.txt3,.hireme{
display: none;
}
.ipadtext1,.ipadtext2,.ipadtext3,.ipadhireme{
display: block;
}
.ipadtext1{
bottom: 70%;
font-size: 70px;
}
.ipadtext2{
bottom: 61.4%;
font-size: 70px;
}
.ipadtext3{
bottom: 53%;
font-size: 64px;
}
.ipadhireme{
bottom: 43%;
}

}

<div class="menuja">
<div class="webdev">
<div class="txt1">Mobile Text</div>
<div class="txt2">Mobile Text</div>
<div class="txt3">Mobile Text.</div>
<a href="contact.html"><button class="hireme">Mobile</button></a>
<div class="ipadtext1">Ipad Text</div>
<div class="ipadtext2">Ipad Text</div>
<div class="ipadtext3">Ipad Text.</div>
<a href="contact.html"><button class="ipadhireme">Lorem Ipsum</button></a>
</div>

Answer 1

我相信它没有回答你的问题，但把它作为一个建议：如果你应用断点，把移动设备放在第一位，那就简单多了。并且对移动设备更友好。 这样你就不需要覆盖你的CSS规则了。

// This applies from 0px to 600px
body {
background: red;
}
// This applies from 600px onwards
@media (min-width: 600px) {
body {
background: green;
}
}

抱歉，如果这对您没有帮助，但这是一种可能对您有所帮助的好习惯。

Answer 2

您使用的断点不适合现代 iPad 屏幕。请改用以下媒体查询：

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3 and newer devices (excluding iPad Pro)
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/**********
iPad Pro 12.9"
**********/
/* Landscape*/
@media only screen and (min-device-width: 1366px) and (max-device-height: 1024px) and (-webkit-min-device-pixel-ratio: 2)  and (orientation: landscape)  {}
/* Portrait*/
@media only screen and (min-device-width: 1024px) and (max-device-height: 1366px) and (-webkit-min-device-pixel-ratio: 2)  and (orientation: portrait)  {}
/**********
iPad Pro 10.5"
**********/
/* Landscape*/
@media only screen and (min-device-width: 1112px) and (max-device-height: 834px) and (-webkit-min-device-pixel-ratio: 2)  and (orientation: landscape)  {}
/* Portrait*/
@media only screen and (min-device-width: 834px) and (max-device-height: 1112px) and (-webkit-min-device-pixel-ratio: 2)  and (orientation: portrait)  {}

希望这有帮助。