Question

我正在尝试为我未来的项目构建一个响应式脚本，以便在此过程中使用和开发，因为我不喜欢自动响应脚本如何搞乱我的设计。

关于这个脚本的想法是它将你重定向到另一个版本的网站，或者只是加载另一个匹配某些常见分辨率的CSS文件。

让我先附上我的代码，以便更好地了解我所面临的问题。

/*Change CSS and also redirect the page in response to common resolutions.*/
$(document).ready(function() {
    checkWidth ();
    $(window).resize(checkWidth);
});
var xFullPath = window.location.pathname;
var xPageName = xFullPath.substring(xFullPath.lastIndexOf("/") + 1);

function checkWidth(){
    var windowWidth = $(window).width(),
        cssLocation = $('link[href$="main.css"]');

    if (windowWidth <= 240){
        cssLocation.attr('href','stylesheets/240-main.css');
        }
    else if (windowWidth <= 490){
        if (xPageName != "smartPhone-index.html"){
            window.location.replace("smartPhone-index.html");
            }
            cssLocation.attr('href','stylesheets/480-main.css');
        }       
    else if (windowWidth <= 768){
        if (xPageName != "index.html"){
            window.location.replace("index.html");
            }
            cssLocation.attr('href','stylesheets/768-main.css');
        }       
    else if (windowWidth <= 1024){
        if (xPageName != "index.html"){
            window.location.replace("index.html");
            }
        cssLocation.attr('href','stylesheets/1024-main.css');
        }       
    else if (windowWidth >= 1280){
        if (xPageName != "index.html"){
            window.location.replace("index.html");
            }
        cssLocation.attr('href','stylesheets/1280-main.css');
        };  
    };

这个脚本按照我的预期工作，当我重新调整浏览器大小时，它开始按照我的意愿执行，但我遇到了2个问题。

1-当我为了测试脚本而将静态网站上传到服务器时是的，当我重新调整大小时，它是有效的，但当我用智能手机打开该地址时，它只是加载默认的一个这是1024 * 768，是的，手机做这些处理这些常见网站的聪明之处，但为什么它不起作用？...

2-当我重新调整浏览器的大小时，它到达的地方不仅仅是加载另一个CSS，而是重定向到另一个HTML结构页面，这有助于更多的电话等，如果我停在那里它大约490px它保持重新加载页面，不间断，直到我把它拖到更里面，也许当它达到480px它停止并把你放在你想要的地方。

如何解决这些问题，或者您能告诉我一些指导方针吗？

谢谢大家。

关于我正在创建的响应脚本的问题

0 个答案: