一、写此篇的初衷:
手机用户常可以更换自己手机系统的字体,那么在浏览网页的时候,网页内容字体也都随之变了,于是我想,能不能让自己的网站的字体在手机浏览器中保持不变(使用一款自定义字体)呢;而在PC端浏览器不用处理。
二、功能实现依据:文章来源:https://www.toymoban.com/news/detail-491462.html
首先,CSS @media查询中有判断横屏(orientation:landscape)、竖屏(orientation:portrait)的功能,那么分别在电脑、手机浏览器上是否有不同表现呢,如果有,就靠它了。先看如下代码:文章来源地址https://www.toymoban.com/news/detail-491462.html
<style type="text/css">
/*定义竖屏 css*/
@media screen and (orientation:portrait) {
.portrait { display:block; background-color:#FFCC00; }
.landscape { display:none; }
}
/*定义横屏 css*/
@media screen and (orientation:landscape) {
.portrait { display:none; }
.landscape { display:block; background-color:#FFCC00; }
}
</style>
<div class="portrait">当前(浏览器)是竖屏</div>
<div class="landscape">当前(浏览器)是横屏</div>
<span id="a">
到了这里,关于CSS 利用@media screen判断识别手机/PC端浏览器的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!