CSS 仅定位手机

Question

我正在尝试使用 CSS 仅在手机上锁定方向，但似乎无法使代码正常工作。我假设这是因为宽度，所以我将它们保留为 ?.

/* SHOW MESSAGE ON LANDSCAPE ON PHONE */
@media only screen and (orientation:landscape) and (min-device-width : ????) and (max-device-width : ????) { 
  #screen-lock { display:block; }
  #screen-display { display:none; }
}
 
/* (B) SHOW THE SCREEN ON TABLETS AND LAPTOPS */
@media only screen and (orientation:portrait) and (min-device-width : ????) and (max-device-width : ????) {
  #screen-lock { display:none; }
  #screen-display { display:block; }
}

Answer 1

在查看@Mattia 的回答后找到了我正在寻找的“all-in-one”答案。

<div id="screen-lock">Please rotate me back to portrait</div>
<div id="screen-display">...</div>

和CSS代码

/*============================================================================== 
Show lock screen on all small devices < 1000px width if put into landscape
================================================================================ */
@media only screen 
and (max-width: 1000px){ 
    #screen-lock { display: none; } #screen-display { display: block; }
}

@media only screen
and (max-width: 1000px) and (orientation: portrait) { 
    #screen-lock { display: none; }  #screen-display { display: block; }
}

@media only screen 
and (max-width: 1000px) and (orientation: landscape) { 
     #screen-lock { display: block; } #screen-display { display: none; }
}


/*============================================================================== 
Disregard lock screen on devices > 1000px width
================================================================================ */

@media only screen and (min-width: 1000px ) 
{ 
    #screen-lock { display: none; } #screen-display { display: block; }
}

在响应式设计模式（FireFox 和 Chrome）中进行了测试，这适用于小于 iPad 的所有设备。任何改进建议都将受到赞赏。

CSS 仅定位手机

CSS to target phones only

css

media-queries