Автоопределение разрешения экрана и изменение масштаба браузера с помощью Javascript?
Как автоматически определить разрешение экрана и изменить масштаб браузера с помощью Javascript?
Я думал о чем-то более похожем на это:
У меня есть следующий код:
#warpсwidth: 3300%иmaskсwidth: 100%; а затем каждый.itemимеетwidth: 3.030303%- со скрытым переполнением, иначе оно не могло бы работать так, как я хочу.
Моя точка зрения такова: я сделал это для экранов шириной не менее 1280 пикселей.
Я хочу, чтобы кто-то мог написать код, который я мог бы использовать для переключения CSS-файла после просмотра на экране размером менее 1280 пикселей - я мог бы сделать что-то вроде:
.item img { width: 80%; }и тогда результат будет таким же, как "уменьшение масштаба браузера".
4 ответа
Автоопределение разрешения экрана
Смотри этот ТАК вопрос
изменить масштаб браузера с помощью JavaScript
Это невозможно. Смотри этот ТАК вопрос.
Если вы имеете в виду изменить собственный масштаб браузера, вызванный CTRL +/-, то это невозможно. Вы можете настроить свойства CSS / применить таблицы стилей, но не можете влиять на собственные элементы управления браузера. На самом деле здесь есть только опции CSS, в зависимости от вашей целевой аудитории (и их выбора в браузере) посредством использования медиа-запросов, пара примеров здесь и здесь. Если они не подходят, то вы можете делать разные вещи с помощью JavaScript, чтобы определять ширину / высоту экрана и соответственно корректировать.
This will help to detect browser zoom tested on all browser
<script>
window.utility = function(utility){
utility.screen = {
rtime : new Date(1, 1, 2000, 12,00,00),
timeout : false,
delta : 200
};
utility.getBrowser = function(){
var $b = $.browser;
$.extend(utility.screen,$.browser);
utility.screen.isZoomed = false;
var screen = utility.screen;
screen.zoomf = screen.zoom = 1;
screen.width = window.screen.width;
screen.height = window.screen.height;
if($b.mozilla){ //FOR MOZILLA
screen.isZoomed = window.matchMedia('(max--moz-device-pixel-ratio:0.99), (min--moz-device-pixel-ratio:1.01)').matches;
} else {
if($b.chrome){ //FOR CHROME
screen.zoom = (window.outerWidth - 8) / window.innerWidth;
screen.isZoomed = (screen.zoom < .98 || screen.zoom > 1.02)
} else if($b.msie){//FOR IE7,IE8,IE9
var _screen = document.frames.screen;
screen.zoom = ((((_screen.deviceXDPI / _screen.systemXDPI) * 100 + 0.9).toFixed())/100);
screen.isZoomed = (screen.zoom < .98 || screen.zoom > 1.02);
if(screen.isZoomed) screen.zoomf = screen.zoom;
screen.width = window.screen.width*screen.zoomf;
screen.height = window.screen.height*screen.zoomf;
}
}
return utility.screen;
};
window.onresize = function(e){
utility.screen.rtime = new Date();
if (utility.screen.timeout === false) {
utility.screen.timeout = true;
setTimeout(window.resizeend, utility.screen.delta);
}
};
window.resizeend = function() {
if (new Date() - utility.screen.rtime < utility.screen.delta) {
setTimeout(window.resizeend, utility.screen.delta);
} else {
utility.screen.timeout = false;
utility.screen = utility.getBrowser();
if(window.onresizeend) window.onresizeend (utility.screen);
if(utility.onResize) utility.onResize(utility.screen);
}
};
window.onresizeend = function(screen){
if(screen.isZoomed)
$('body').text('zoom is not 100%');
else{
$('body').text('zoom is 100% & browser resolution is'+[screen.width+'X'+screen.height]);
}
};
$(document).ready(function(){
window.onresize();
});
return utility;
}({});
</script>
RE: автоматически определять разрешение экрана и изменять масштаб браузера с помощью Javascript?
Вопрос вполне возможен и действует на нашем сайте здесь:
www.noteswithwings.com
JS определяет ширину экрана и увеличивает или уменьшает масштаб, чтобы разместить содержимое на экране.
Кроме того, если пользователь изменяет размер окна, запускается масштабирование. Это на самом деле помогает разместить контент на экранах и планшетах размером с планшет, такой же маленький, как iphone, без добавления дополнительных таблиц стилей или обнаружения ОС / браузера.
var oldZoom = $(window).width();
var windowWidth = $(window).width();
check_window_size(windowWidth,1,bsr,bsr_ver);
$(window).resize(function() {
var windowWidthnow = $(window).width();
check_window_size(windowWidthnow,2,bsr,bsr_ver);
});
function check_window_size(size,init_var,bsr,bsr_ver)
{
/* Develop for resizing page to avoid grey border!
Page layout 1265px wide.
On page resize shift layout to keep central, zoom BG-img to fill screen
Zoom content down for smaller screens by 5% to keep content flow!
*/
//change this var for screen width to work with, in this case our site is built at 1265
var wdth = 1265;
//Change this variable for minimum screen;
var smallest_width=1120;
var varZoom= $(window).width()/wdth;
var s_size = $(window).width();
var scale_smaller;
var center = (s_size-wdth)/2;
var its_ie=false;
if(size<=smallest_width)
{
$("#old_browser").css("width","50%").css({"height":"40px","left": center+"px"});
if(!check_for_object(false,"moved_pages"))
{
if(center<-110)//margin width!
{
if(!its_ie)
$("#scroller").css("zoom",0.95);
$("#footer").css("zoom",0.9).css("left",120+"px");
$(".colmask").css("left",-110+"px");
if(check_for_object(false,"move_menu_loggedin"))
$("#move_menu_loggedin").css("right","110px");
if(check_for_object(false,"login_div"))
$("#login_div").css("left","-80px");
return;
}
$("#move_menu_loggedin").css("left","-"+center+"px");
$("#scroll").css("zoom","normal");
$(".colmask").css("left",center+"px");
}
else
{
/*Only pages that you do not want to move the colmask for!*/
$("#scroller").css("zoom",0.90);//.css("left","-50px");;
$("#footer").css("zoom","normal");
}
}
else
{
if(size>wdth)
$("#background").css("zoom",varZoom);
$("#scroller").css("zoom","normal");
$("#footer").css({"zoom":"normal","left":0});
if(!check_for_object(false,"moved_pages"))
{
$(".colmask").css("left",center+"px");
$(".colmask").css("zoom","normal");
var movelog = -center;
if(check_for_object(false,"move_menu_loggedin"))
$("#move_menu_loggedin").css("right",movelog +"px");
if(check_for_object(false,"login_div"))
$("#login_div").css("left","80px");
}
else
{
$(".colmask").css("zoom","normal");
}
}
}
- check_window_size(windowWidth,1,bsr,bsr_ver); bsr & bsr_ver обнаруживаются с использованием класса php.
- #old_browser - это div, содержащий информацию, если у вас старый веб-браузер. - #background - фиксированное изображение 100x100% экрана.
Как вы можете видеть, мы также переместили несколько элементов, которые не входили в область видимости div. Colmask - это содержащий div для большинства содержимого страниц (для нас, который находится под заголовком, поэтому мы перемещаем некоторые элементы вручную)
Надеюсь, что фрагмент кода может помочь кому-то еще достичь этого.