CSS 利用@media screen判断识别手机/PC端浏览器

一、写此篇的初衷：

手机用户常可以更换自己手机系统的字体，那么在浏览网页的时候，网页内容字体也都随之变了，于是我想，能不能让自己的网站的字体在手机浏览器中保持不变（使用一款自定义字体）呢；而在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 class="portrait">当前（浏览器）是竖屏</div>
<div class="landscape">当前（浏览器）是横屏</div>
<span id="a"></span>
<script>
window.onload=window.onresize=function(){document.getElementById('a').innerHTML = '屏幕尺寸为：宽 '+window.screen.width+' x '+window.screen.height+'';
}

1、电脑浏览器表现：

缩窄浏览器——

可见横、竖屏分得还是很清楚的。但是大家发现没有，判断电脑屏幕尺寸的结果是没有变的，都是1440x900，因为电脑就是横着看的，您不像手机一样把电脑竖起来吧*′∀`)′∀`)*′∀`)*′∀`)

2、手机浏览器表现：

可见手机表现就如偿所愿了，非常正常，横屏时窗口是横向的尺寸，竖屏是竖向的，very good!

三、添加屏幕窗口的临界尺寸判断（关键点）：

目前电脑的屏幕分辨率设置起点是800x600（早期显像管时代的14寸），其次是1024x768（15寸也好多年前了），——这二种显然目前看是太落后了，基本没人用了吧；即使如此，而大多手机的窗口屏显也都达不到这个尺寸，所以可以放心利用这二个作为判断分寸。

/*定义竖屏 css*/
@media screen and (orientation:portrait) and (max-device-width:600px) and (max-device-height:800px) {}
/*定义横屏 css*/
@media screen and (orientation:landscape) and (max-device-width:800px) and (max-device-height:600px) {}

请注意：这里用的是max-device-width和max-device-height而不是网上流行的max-width和max-height，前者是定义显示屏“宽、高”，后者是定义浏览器“宽、高”，显然前者是恒定不变的，而后者比如PC浏览器是可变换尺寸的，可以变窄变成竖长手机的样子，所以用起来不那么靠谱。

四、CSS @media查询中的or（或）：

最后把横屏（orientation:landscape）、竖屏（orientation:portrait）综合起来，用逗号连接两条命令，实现or（或）的功能，变成一行命令代码：

@media
screen and (orientation:portrait) and (max-device-width:600px) and (max-device-height:800px),
screen and (orientation:landscape) and (max-device-width:800px) and (max-device-height:600px) {
}

这个也行：

@media
screen and (orientation:portrait) and (max-device-width:768px) and (max-device-height:1024px),
screen and (orientation:landscape) and (max-device-width:1024px) and (max-device-height:768px) {
}

五、贴上我的终稿：

当用户用手机浏览器浏览时，调用自定义的字体（压缩过的微软雅黑），用PC、iPad浏览器浏览时不用处理。

<style type="text/css">
<!--
/*判断手机浏览器，当前限：竖屏 宽600 高800，横屏 宽600 高800*/
@media
screen and (orientation:portrait) and (max-device-width:600px) and (max-device-height:800px),
screen and (orientation:landscape) and (max-device-width:800px) and (max-device-height:600px) {
@font-face {font-family: "Microsoft YaHei";src: url("_css/font_cn/_gb/msyh.eot"); /* IE9 */src: url("_css/font_cn/_gb/msyh.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */url("_css/font_cn/_gb/msyh.woff") format("woff"), /* chrome、firefox */url("_css/font_cn/_gb/msyh.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */url("_css/font_cn/_gb/msyh.svg#msyh") format("svg"); /* iOS 4.1- */
}
}
body {font-family:"tahoma","Microsoft YaHei","SimSun";
}
-->
</style>

现丑了，具体应用，参见：http://www.furuijinzhao.com/

用PC浏览器浏览时，使用浏览器默认字体；用手机浏览器浏览时调用自定义字体，实现不被手机系统字体所干扰。

如果您认为此篇对您有帮助，请不吝点赞，谢谢！

CSS 利用@media screen判断识别手机/PC端浏览器相关推荐

css media 顺序,CSS3 利用@media screen实现网页布局的自适应，样式顺序
利用@media screen可以适应不同屏幕大小,做出相应的界面调整: 在css中@media (min-width: 768px)表示最小是768也就是>=768: @media (min- ...
利用@media screen实现网页布局的自适应
利用@media screen实现网页布局的自适应优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小.只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽 ...
利用 @media screen 实现网页布局的自适应,@media screen and
利用 @media screen 实现网页布局的自适应,@media screen and 开始研究响应式web设计,CSS3 Media Queries是入门. Media Queries 其作用就 ...
css响应式布局及分辨率（PC端、H5端）
PC端按屏幕宽度大小排序分辨率比例 | 设备尺寸 1024*500 (8.9寸) 1024*768 (比例4:3 | 10.4寸.12.1寸.14.1寸.15寸; ) 1280*800(16:1 ...
js判断客户端是PC端还是移动端访问
js判断客户端是PC端还是移动端访问方法一 (推荐) function IsPC(){ var userAgentInfo = navigator.userAgent;var Agents = ne ...
javascript 判断前端是 pc端还是移动端
javascript 判断前端是 pc端还是移动端 <!DOCTYPE html> <html lang="en"> <head>< ...
判断当前入口是PC端企业微信还是PC端浏览器。或者是APP端企业微信
function isQyweixin(){//判断当前入口是PC端还是APP端let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone| ...
利用webSocket实现扫码登录PC端
利用webSocket实现扫码登录PC端业务需求需求分析效果演示需求实现业务流程图业务流转图代码实现 1.数据库设计 2.代码实现 1.web端代码 2. APP端代码业务需求在ap ...
php判断是否电脑pc端
php判断是否电脑pc端 $str = strtolower($_SERVER['HTTP_USER_AGENT']); $isPC = strpos($str, 'windows nt'); if( ...

CSS 利用@media screen判断识别手机/PC端浏览器

CSS 利用@media screen判断识别手机/PC端浏览器相关推荐

最新文章

热门文章