不同设计的桌面/移动设备

Posted 2023-05-07

技术标签:

【中文标题】不同设计的桌面/移动设备【英文标题】：Different design desktop/mobile devices 【发布时间】：2016-09-26 23:19:02 【问题描述】：

我希望这个问题有答案。我不擅长编码，希望有人能理解我的问题。

有没有办法有两种不同的设计.. 我有一个用于台式机/ipad 的设计和一个用于移动设备的设计。移动设备的设计更像是应用程序的设计。所以我现在想要的是，如果我的 javascript 代码发现该网站是在移动设备上打开的，那么该网站就会变成移动设备的版本。

例如：桌面/ipad 版本为 index.html，移动版本为 mobile.html

如果

有没有办法让javascript代码转到移动版本

如果（！is_mobile）（函数（XXXXX） XXXXXX

【问题讨论】：

【参考方案1】：

最佳做法是使用响应式 html + css。这将根据设备类型或屏幕尺寸自动重新设置页面样式。但如果你更喜欢这样做，你可以这样做：

在 index.html 的标题中（在任何样式或脚本之前），您可以过滤当前打开页面的设备并将用户转发到移动 html（如果他来自移动设备）。

<script>
if( /android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) 
   window.location.href = 'mobile.html';

</script>

希望对你有帮助。

【讨论】：

【参考方案2】：

以下 javascript 代码将很有用：

function adjustStyle() 
    var width = 0;

    //getting width of webpage
    if (window.innerHeight) 
        width = window.innerWidth
     else if (document.documentElement && document.documentElement.clientHeight) 
        width = document.documentElement.clientWidth;
     else if (document.body) 
        width = document.body.clientWidth;
    

    //loading css if width less than 600. Make sure your link tag has id  "myCSS"
    if (width < 600) 
        document.getElementById("myCSS").setAttribute("href", "css/mobile.css")
     else 
        document.getElementById("myCSS").setAttribute("href", "css/desktop.css")
    


//calling the function
window.onresize = function () 
    adjustStyle();

【讨论】：