一、多设备适配技术实现方式
1.纯css:适合大多数网页主页场景,一般用media 按照分辨率区分
优点:容易掌握,
缺点:需要要隐藏的功能,打印开关,单据关闭,不用单据样式,弹窗大小,很多屏幕,无法手动切换适配,例如手机没有usb打印,在手机上要切换为蓝牙,wifi,4G
2.多语言混合
优点:不仅可以适配样式,还能适配功能,语言,接口,打印机类型,可以把独立适配的css,js,html,放到一块,可以全局按照比例调整
缺点:学习需要一定基础
二、css技术代码
/* 当屏幕宽度小于 600px 时应用以下样式 */
@media screen and (max-width: 600px) {
body {
font-size: 14px;
}
.nav {
display: none;
}
}
/* 当设备处于竖屏时应用以下样式 */
@media (orientation: portrait) {
.sidebar {
width: 20%;
}
}
三、未来之窗osv技术
<未来之窗os condition="$adapter_device_sign eq '手机版' ">
<style>
body{
overflow-y: scroll !important;
width:1090px!important;
}
.sheet_item_delete{
padding-left: 5px!important;
padding-right: 5px!important;
}
.left{
border-radius: 0px; /*background: #343435;*/ margin-top: 0px;
background:#fff;
float: left;
/*2024-7-25 税务*/
width:960px!important;;
}
.left .left_n {
padding-left: 0px!important;
padding-top: 0px!important;
}
.left .left_tab {
padding-left: 0px!important;
}
.settlement {
width: 605px!important;
margin-left: -352.5px!important; margin-top: -175.5px!important;
}
.pay_dialog_mulpay{
width: 405px!important;
margin-left: -452.5px;
margin-left: -252.5px!important; margin-top: -175.5px!important;
}
.pay_dialog_mulpay .chat_end .mulpaytable_div{
width: 205px!important;
height: 180px!important;
}
.pay_dialog_mulpay .chat_end .mulpaytable{
width: 205px!important;
}
.pay_dialog_mulpay .chat_end .mul_offline_pay{
width: 180px!important;
}
.pay_dialog_mulpay .chat_end .mul_offline_pay_body{
width: 180px!important;
}
.pay_dialog_mulpay .chat_end .mul_offline_pay li{
padding: 0 5px!important;;
}
</style>
<script>
加载手机版代码
</script>