当前位置:网站首页>Determine the best implementation of horizontal and vertical screens
Determine the best implementation of horizontal and vertical screens
2022-07-05 20:55:00 【CV engineer with brain】
1、CSS Media Queries
1. inline style
@media screen and (orientation:portrait) {
// Vertical screen
}
@media screen and (orientation:landscape) {
// Horizontal screen
}
2. Outreach style
<!-- Vertical screen -->
<link rel="stylesheet" media="all and (orientation:portrait)" href="..." />
<!-- Horizontal screen -->
<link rel="stylesheet" media="all and (orientation:landscape)" href="..." />
3.window.matchMedia()
var mql = window.matchMedia("(orientation: portrait)");
function onMatchMeidaChange(mql){
if(mql.matches) {
// Vertical screen
}else {
// Horizontal screen
}
}
onMatchMeidaChange(mql);
mql.addListener(onMatchMeidaChange);
4.window.innerHeight/window.innerWidth
function detectOrient(){
if(window.innerHeight >= window.innerWidth) {
// Vertical screen
}else {
// Horizontal screen
}
}
detectOrient();
window.addEventListener('resize',detectOrient);
边栏推荐
- 台风来袭!建筑工地该如何防范台风!
- bazel是否有学习的必要
- Duchefa MS medium contains vitamin instructions
- 10000+ 代码库、3000+ 研发人员大型保险集团的研发效能提升实践
- Duchefa丨S0188盐酸大观霉素五水合物中英文说明书
- Typhoon is coming! How to prevent typhoons on construction sites!
- 大二下个人发展小结
- ts 之 属性的修饰符public、private、protect
- Abnova maxpab mouse derived polyclonal antibody solution
- 2. < tag hash table, string> supplement: Sword finger offer 50 The first character DBC that appears only once
猜你喜欢
重上吹麻滩——段芝堂创始人翟立冬游记
Duchefa丨S0188盐酸大观霉素五水合物中英文说明书
haas506 2.0开发教程 - 阿里云ota - pac 固件升级(仅支持2.2以上版本)
Use of thread pool
Duchefa丨MS培养基含维生素说明书
Use of form text box (II) input filtering (synthetic event)
MySQL InnoDB架构原理
Abnova丨培养细胞总 RNA 纯化试剂盒中英文说明书
显示屏DIN 4102-1 Class B1防火测试要求
Abnova DNA marker high quality control test program
随机推荐
大二下个人发展小结
Analyze the knowledge transfer and sharing spirit of maker Education
ts 之 属性的修饰符public、private、protect
XML建模
教你自己训练的pytorch模型转caffe(二)
如何让化工企业的ERP库存账目更准确
PHP deserialization +md5 collision
当用户登录,经常会有实时的下拉框,例如,输入邮箱,将会@qq.com,@163.com,@sohu.com
Duchefa MS medium contains vitamin instructions
序列联配Sequence Alignment
重上吹麻滩——段芝堂创始人翟立冬游记
poj 3414 Pots (bfs+线索)
《SAS编程和数据挖掘商业案例》学习笔记# 19
珍爱网微服务底层框架演进从开源组件封装到自研
Duchefa丨P1001植物琼脂中英文说明书
Abbkine丨TraKine F-actin染色试剂盒(绿色荧光)方案
Hdu2377bus pass (build more complex diagram +spfa)
mysql全面解析json/数组
AI automatically generates annotation documents from code
haas506 2.0开发教程 - 阿里云ota - pac 固件升级(仅支持2.2以上版本)