CSS 仅针对手机答案

【问题标题】：CSS to target phones onlyCSS 仅针对手机
【发布时间】：2022-02-04 22:06:33
【问题描述】：

我正在尝试使用 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; }
}

【问题讨论】：

您无法定位通用手机，因为没有通用手机。您只能定位屏幕宽度，此答案包括一些 iPhone 屏幕宽度stackoverflow.com/a/59208280/3795691
感谢@MattiaRighetti 这个答案让我走上了正轨。

标签： css media-queries

【解决方案1】：

在查看@Mattia 的答案后，找到了我一直在寻找的“一体式”答案。

<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 的设备。任何关于改进的建议都将受到赞赏。

【讨论】：