当前位置:网站首页>判断横竖屏的最佳实现
判断横竖屏的最佳实现
2022-07-05 20:50:00 【带脑子的CV工程师】
1、CSS Media Queries
1.内联样式
@media screen and (orientation:portrait) {
//竖屏
}
@media screen and (orientation:landscape) {
//横屏
}
2.外联样式
<!-- 竖屏 -->
<link rel="stylesheet" media="all and (orientation:portrait)" href="..." />
<!-- 横屏 -->
<link rel="stylesheet" media="all and (orientation:landscape)" href="..." />
3.window.matchMedia()
var mql = window.matchMedia("(orientation: portrait)");
function onMatchMeidaChange(mql){
if(mql.matches) {
// 竖屏
}else {
// 横屏
}
}
onMatchMeidaChange(mql);
mql.addListener(onMatchMeidaChange);
4.window.innerHeight/window.innerWidth
function detectOrient(){
if(window.innerHeight >= window.innerWidth) {
// 竖屏
}else {
// 横屏
}
}
detectOrient();
window.addEventListener('resize',detectOrient);
边栏推荐
- Abnova丨荧光染料 620-M 链霉亲和素方案
- ts 之 属性的修饰符public、private、protect
- Redis唯一ID生成器的实现
- ts 之 类的简介、构造函数和它的this、继承、抽象类、接口
- Implementation of redis unique ID generator
- 概率论机器学习的先验知识(上)
- Monorepo management methodology and dependency security
- Make Jar, Not War
- 挖财商学院给的证券账户安全吗?可以开户吗?
- National Eye Care Education Conference, 2022 the Fourth Beijing International Youth eye health industry exhibition
猜你喜欢
ClickHouse 复制粘贴多行sql语句报错
当Steam教育进入个性化信息技术课程
Abnova丨血液总核酸纯化试剂盒预装相关说明书
AI 从代码中自动生成注释文档
Duchefa丨MS培养基含维生素说明书
Kubernetes resource object introduction and common commands (V) - (configmap & Secret)
leetcode:1755. 最接近目标值的子序列和
解析创客教育的知识迁移和分享精神
National Eye Care Education Conference, 2022 the Fourth Beijing International Youth eye health industry exhibition
Write an interface based on flask
随机推荐
Duchefa low melting point agarose PPC Chinese and English instructions
Duchefa丨低熔点琼脂糖 PPC中英文说明书
[Yugong series] go teaching course in July 2022 004 go code Notes
Abnova cyclosporin a monoclonal antibody and its research tools
Applet global configuration
培养机器人教育创造力的前沿科技
Monorepo管理方法论和依赖安全
Write an interface based on flask
Welcome to the game and win rich bonuses: Code Golf Challenge officially launched
CADD course learning (7) -- Simulation of target and small molecule interaction (semi flexible docking autodock)
[quick start of Digital IC Verification] 2. Through an example of SOC project, understand the architecture of SOC and explore the design process of digital system
Duchefa p1001 plant agar Chinese and English instructions
Abnova blood total nucleic acid purification kit pre installed relevant instructions
Propping of resources
The development of research tourism practical education helps the development of cultural tourism industry
[record of question brushing] 1 Sum of two numbers
渗透创客精神文化转化的创客教育
启牛2980有没有用?开户安全吗、
Abbkine trakine F-actin Staining Kit (green fluorescence) scheme
E. Singhal and numbers (prime factor decomposition)