Question

我想根据页面是否提供不同的内容在大屏幕（PC /平板电脑）或小屏幕（移动）上观看。我的网站是响应式的，使用bootstrap，但我有很多内容，这只适用于PC;它完全压倒了移动读者。

如何在网站提供时提供不同的段落和图片内容在较小的屏幕上观看？

有人建议我使用javascript或（更糟糕的）媒体查询，但我不知道如何。我对此感到陌生 - 您能提供一些示例代码吗？

THX

注1：这不是（仅）样式表问题。而不是渲染相同内容的格式不同，我想发送不同的内容。

注意2：我不想要开发一个新的.mobi网站，这将丢失我现有的搜索引擎声誉。

Answer 1

你应该看看这个，它与你想要达到的目标非常相似：Prevent a video background from being downloaded on mobile browsers

您可以使用此代码检测移动设备：

function detectmob() { 

    if( navigator.userAgent.match(/Android/i)
    || navigator.userAgent.match(/webOS/i)
    || navigator.userAgent.match(/iPhone/i)
    || navigator.userAgent.match(/iPad/i)
    || navigator.userAgent.match(/iPod/i)
    || navigator.userAgent.match(/BlackBerry/i)
    || navigator.userAgent.match(/Windows Phone/i)
    ){

        // If mobile, then we do all this

    }
    else {

        // If not mobile then do this

    }
} // detectmob

---------- [编辑] ----------

var width = window.innerWidth;
var height = window.innerHeight;

if (width  > 480) {
    // Mobile code
} else {
    // Other code
}

---------- [编辑] ----------

创建两个文件mobile.html和desktop.html，并为它们提供相应的内容。然后，在您的主页面中，将以下javascript放在页面的底部中：

function getFileContent(file) {
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, false);
    rawFile.onreadystatechange = function () {
        if (rawFile.readyState === 4) {
            if (rawFile.status === 200 || rawFile.status == 0) {
                var fileContent = rawFile.responseText;
                document.getElementsByTagName("body")[0].innerHTML = fileContent;
            }
        }
    }
    rawFile.send(null);
}

现在，您可以使用之前的javascript来获取文件内容并根据访问者是在移动电话上还是在计算机上显示它们：

var width = window.innerWidth;
var height = window.innerHeight;

if (width  > 480) {
    // Mobile code
    getFileContent("mobile.html");
} else {
    // Other code
    getFileContent("desktop.html");
}

那应该是它！如果您需要任何进一步的帮助，请告诉我。

如何根据屏幕尺寸

1 个答案: