JS检测浏览器分辨率在Chrome中工作;Safari，但不是IE9或FF9

JS to detect browser resolution works in Chrome & Safari but not IE9 or FF9

本文关键字：IE9 FF9 Safari 分辨率 浏览器 检测 Chrome 工作 JS      更新时间：2023-09-26

由于某种原因，这个检测浏览器分辨率的基本JS在Safari和Chrome中有效，但在IE9或FF9中无效。基本上，每当表单即将提交时，JS都应该用浏览器的高度和宽度更新隐藏字段。但同样，这在IE9或FF9中不起作用。

提交按钮-

<input type="image" src="lib/send_feedback.jpg" border="0" class="feedback-submit-img" onClick="javascript: validate(); return false;"/>

隐藏表单代码-

<input name="h" id="h" type="hidden" value="" /><input name="w" id="w" type="hidden" value="" />

相关jQuery-

// Submit form to next page
function submitForm() {
//   document.forms["feedbackform"].submit();
    document.feedbackform.submit();
}
// Submit form and validate email using RFC 2822 standard
function validateEmail(email) { 
    // Modified version original from: http://stackoverflow.com/a/46181/11236
    var re = /^(([^<>()[']''.,;:'s@'"]+('.[^<>()[']''.,;:'s@'"]+)*)|('".+'"))@(('[[0-9]{1,3}'.[0-9]{1,3}'.[0-9]{1,3}'.[0-9]{1,3}'])|(([a-zA-Z'-0-9]+'.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
}
// Return true if email field is left unchanged
function originalText(email){
    var defaultMsg;
    defaultMsg = "Enter your email address (optional)";
    if(defaultMsg == email){
        return true;    
    }
    return false;
}
// Verify or decline with error message
function validate(){
    $("#result").text("");
    var email = $("#email").val();
    if ((validateEmail(email)) || originalText(email)) {
        w.value = screen.width;
        h.value = screen.height;
        submitForm();
    } else {
        $("#result").text(email + " is not a valid email.");
        $("#result").css("color", "red");
    }
    return false;
}
$("form").bind("submit", validate);

以下是整个代码和CSS

jquery有一种获取高度的方法（使用.height()方法），它与跨浏览器兼容。以下是实现跨浏览器兼容文档高度的手动方法 
function getDocHeight() {
    var D = document;
    return Math.max(
        Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
        Math.max(D.body.clientHeight, D.documentElement.clientHeight)
    );
}

http://james.padolsey.com/javascript/get-document-height-cross-browser/

这是jquery版本（来自同一链接中的注释）

$.getDocHeight = function(){
    return Math.max(
        $(document).height(),
        $(window).height(),
        /* For opera: */
        document.documentElement.clientHeight
    );
};

当你说浏览器分辨率时，你指的是显示器的物理大小？如果是，您可以使用：

var w = window.screen.width;
var h = window.screen.height;

这些与设备大小相同。

请参阅：responsejs.com/labs/dimensions/

相关文章：