批发行业进销存-登录适配 android 源码CyberWinApp-SAAS 本地化及未来之窗行业应用跨平台架构

一、多设备适配技术实现方式

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>