trung tâm Nhận trang web phối trên các thiết bị tablet sử dụng JavaScript

Tôi đang cố gắng để tính trung tâm hình học khung nhìn trên một trang web, trả lại với các thiết bị máy tính bảng (iOS và Android), tức các CENTER thực tế của khung nhìn (những gì bạn thấy) theo số bản dịch hiện tại và mức thu phóng - không muốn chính giữa tài liệu, tôi muốn trung tâm của màn hình những gì tôi đang xem.trung tâm Nhận trang web phối trên các thiết bị tablet sử dụng JavaScript

Vấn đề là tính toán này không tính đến bất kỳ loại dịch vụ phóng to nào (sau đó).

Trên iOS, tôi đã thử với một số câu trả lời này, về câu hỏi detecting pinch to zoom on iOS, Tôi đã có thể nắm bắt sự kiện "OnZoom" nhưng không nhận được bất kỳ giá trị nào.

Trên Android, tôi thậm chí không thể bắt bất kỳ sự kiện nào liên quan đến thu phóng. Tôi biết về các sự kiện touchmove và touchstart, nhưng làm thế nào tôi có thể phân biệt để thu phóng (và giá trị phóng to)

Tôi đang sử dụng thư viện jQuery 1.7.2.

Nguồn

2012-07-13 jose

câu hỏi của bạn là khó hiểu. u có nghĩa là gì bởi "viewport trung tâm hình học" .. plz giải thích. – Neji

Điều này nghe có vẻ hơi kỳ quặc, nhưng bạn đã thử một div ẩn hoàn toàn, được sắp xếp để lấp đầy (trái: 0; phải: 0; trên cùng: 0; dưới cùng: 0;) và bên trong div đó và sau đó nhận tọa độ của hình ảnh bằng cách sử dụng .position() ;? –

Hình ảnh đó sẽ không lớn bằng toàn bộ tài liệu? Nếu nó sẽ kéo dài trung tâm sẽ không được theo trung tâm viewport, tôi nghĩ rằng ... – jose

Tôi đã thực hiện một demo page được xác nhận để làm việc trên iPhone iPad, Samsung Galaxy Tab 10. Tôi đã chỉ gắn liền sự kiện click trên một div khổng lồ, do đó khai thác trên màn hình sau khi phóng to để cập nhật màn hình.

Cách tính rất đơn giản, sử dụng screen.width/window.innerWidth để lấy mức thu phóng. screen.width sẽ luôn nằm trong pixel của thiết bị và window.innerWidth luôn ở dạng pixel css, cũng có tính năng phóng to thu nhỏ.

tính Hơn nữa rất đơn giản toán học:

// round the result down to avoid "half pixels" for odd zoom levels 
Math.floor(window.scrollY + window.innerHeight/2); 
Math.floor(window.scrollX + window.innerWidth/2);

Để kiểm tra xem người dùng sẽ được phóng to, gắn việc lắng nghe window.resize và window.scroll mà sẽ cháy sau orientationchange ẩn thanh địa chỉ và phóng to.

Dưới đây là bản demo JavaScript của tôi:

var dot = document.getElementById("dot"); 
document.getElementById("main").addEventListener("click", function(e) { 
    var zoom = screen.width/window.innerWidth; 
    alert("zoom: " + zoom + "\n" + "ScrollY: " + window.scrollY); 

    dot.style.top = Math.floor(window.scrollY + window.innerHeight/2 - 5) + "px"; 
    dot.style.left = Math.floor(window.scrollX + window.innerWidth/2 - 5) + "px"; 

}, false);

Nguồn

2012-07-18 23:41:11

Thiết lập trang HTML đơn giản, tôi có thể ở khá gần trung tâm.

Với mã bên dưới, tôi chỉ kiểm tra chiều rộng và chiều cao của div cố định và sau đó kết hợp với bù đắp tài liệu và một số phép toán đơn giản để tìm ra trung tâm và đặt một chấm đen ở đó. Tôi có thể làm cho nó khá gần, nhưng nó thay đổi trên iPhone 4S của tôi.

Chưa thử trên thiết bị Android.

Tôi không nghĩ rằng điều này sẽ hoạt động trên iOS < = 4, vì chúng không hỗ trợ định vị cố định.

<style> 
#fixed{ 
position: fixed; 
left: 0; right: 0; top: 0; bottom: 0; 
background: orange; opacity: 0.25; 
} 
.black{ 
    position: absolute; 
    top:0;left:0; 
    width: 1px; height: 1px; 
    background: black; 
} 
</style> 

<body> 
<div id="fixed"></div> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 
<script> 
jQuery(function($){ 
setInterval(function(){ 
var top = ($("#fixed").height()/2) + $("#fixed").offset().top; 
var left = ($("#fixed").width()/2) + $("#fixed").offset().left; 
$("body").append('<div class="black" style="top: '+top+'px; left: '+left+'px;" />'); 
}, 1500) 

}); 
</script> 
</body>

Nguồn

2012-07-18 03:24:31 ahren

Tôi đã có một yêu cầu khách hàng một trang zoom phương pháp phát hiện trong javascript một vài năm trước đây.

Trong trường hợp của tôi, anh ấy muốn nó hoạt động trên ứng dụng facebook. Thông qua canvas khung nhìn/khung nhìn.

tôi đã sử dụng Max và Min chức năng

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) 
    ); 
} 
function getDocWidth() { 
    var D = document; 
    return Math.max(
     Math.max(D.body.scrollWidth, D.documentElement.scrollWidth), 
     Math.max(D.body.offsetWidth, D.documentElement.offsetWidth), 
     Math.max(D.body.clientWidth, D.documentElement.clientWidth) 
    ); 
} 

function getMinHeight(h) { 
return Math.min(viewport.currentHeight, getDocHeight(), h); 
}

getMinWidth là tương tự, nhưng tôi đã phải áp dụng chỉnh dựa trên trình duyệt với nó.

Tôi đã tạo một đối tượng được gọi là khung nhìn lưu trữ các thuộc tính của vị trí cố định div, cụ thể currentHeight và currentWidth là offsetHeight và offsetWidth của phần tử div.

Tôi đã kết thúc khởi tạo cửa sổ.intervalTimer để chạy kiểm tra trạng thái của div đó, so với các giá trị được lưu trữ trong đối tượng khung nhìn.

Tôi chắc chắn gắn hoặc thêm trình xử lý sự kiện không phải là tùy chọn thông qua iframe.

tôi vẫn có code demo tại một trang web bị lãng quên tôi loại quản lý .. haha http://focalpointproperties.net/vWorker/proj_zoomcontrol.php

Nguồn

2012-07-24 02:24:36

trung tâm Nhận trang web phối trên các thiết bị tablet sử dụng JavaScript

Trả lời

Các vấn đề liên quan