Tôi đang cố gắng tìm ra cách thay đổi trang web được nhúng khi người dùng xoay điện thoại của họ từ chế độ dọc sang ngang - về cơ bản để tải chế độ xem phù hợp hơn với định dạng màn hình rộng hơn. Điều này có thể thực hiện mà không cần gọi một trang mới từ máy chủ, tức là lái xe từ bên trong CSS/Javascript không?Tôi có thể kích hoạt sự kiện CSS trong safari di động khi thay đổi hướng của iPhone không?
Cảm ơn!
Bạn có thể sử dụng thuộc tính window.orientation. Giá trị của nó là mức độ mà chế độ xem hiện tại được sử dụng. Dưới đây là một ví dụ ngắn gọn:
function updateOrientation()
{
var orientation=window.orientation;
switch(orientation)
{
case 0:
break;
case 90:
break;
case -90:
break;
}
}
Bạn có thể sử dụng chức năng này về sự kiện này:
window.onorientationchange=updateOrientation;
Hy vọng rằng sẽ giúp!
Hỗ trợ Safari Mobile orientation events.
Trình duyệt di động Safari đã hỗ trợ cho sự kiện orientationchange cũng như orientation tài sản trên cửa sổ, vì vậy bạn có thể làm điều gì đó như:
window.onorientationchange = function() {
switch(window.orientation) {
case 0: // Portrait
case 180: // Upside-down Portrait
// Javascript to setup Portrait view
break;
case -90: // Landscape: turned 90 degrees counter-clockwise
case 90: // Landscape: turned 90 degrees clockwise
// Javascript to steup Landscape view
break;
}
}
tôi sẽ thêm lộn ngược vì giao diện người iPad hướng dẫn nói rằng bạn nên hỗ trợ tất cả các định hướng, vì vậy tôi mong đợi Safari trên iPad (và có thể là các phiên bản iPhone trong tương lai) để hỗ trợ nó.
<body onorientationchange="updateOrientation();">
tốt nhất không để thiết lập onorientationchange sở hữu trực tiếp. Thay vì sử dụng những điều sau đây:
window.addEventListener('orientationchange', function (evt) {
switch(window.orientation) {
case 0: // portrait
case 180: // portrait
case 90: // landscape
case -90: // landscape
}
}, false);
Tôi không thể tin rằng không ai nói về phán quyết css:
@media screen and (max-width: 320px) // Portait Mode
{
/* CSS RULINGS */
p{}
body{}
}
@media screen and (min-width: 321px) // Landscape Mode
{
/* CSS RULINGS */
p{}
body{}
}
này chắc chắn hơn đúng hơn là câu trả lời chấp nhận được. –