admin管理员组

文章数量:1658115

一、写此篇的初衷:

手机用户常可以更换自己手机系统的字体,那么在浏览网页的时候,网页内容字体也都随之变了,于是我想,能不能让自己的网站的字体在手机浏览器中保持不变(使用一款自定义字体)呢;而在PC端浏览器不用处理。

二、功能实现依据:

首先,CSS @media查询中有判断横屏(orientation:landscape)、竖屏(orientation:portrait)的功能,那么分别在电脑、手机浏览器上是否有不同表现呢,如果有,就靠它了。先看如下代码:

<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 >当前(浏览器)是竖屏</div>
<div >当前(浏览器)是横屏</div>
<span >

本文标签: 浏览器手机MediacssPC