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的答案之后，找到了我一直在寻找的“全合一”的答案。

<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的设备上工作。任何关于改进的建议都会受到欢迎。