Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Масштабирование против центрирования (https://javascript.ru/forum/misc/34267-masshtabirovanie-protiv-centrirovaniya.html)

prowoke 27.12.2012 06:18

Масштабирование против центрирования
 
Здравствуйте. Вот сайт есть:

http://www.homotomia.ru/

Хозяин сайта попросил уменьшить фотоаппарат, чтобы он влазил в браузер. Чтобы всё было пропорционально, я выставил масштабирование сайта по умолчанию, вот так:
$("body").css({ zoom: 0.65, transform: "scale(0.65)", transformOrigin: "0 0" });
        document.body.style.MozTransform="scale(0.65)"; // для FireFox
        
        if ($.browser.opera) {
                $("body").css("marginTop", "-150px");
                document.body.style.OTransform = "scale(0.65)";// Для Opera 
        }



И появилась забавная проблема, которую я не знаю как решить. Из за масштабирования, сама область документа выравнивается по левому краю в 2 браузерах, в IE и в Firefox. И из-за этого сайт перестаёт быть по центру. Я думал узнать общую ширину окна браузера с помощью $(document).width(), $(window).width(), screen.width, document.body.clientWidth и через вычисления выравнить. Но всё это выдаёт не рабочую область браузера, а область документа. Вот не знаю, как решить проблему. Может подскажете что?

Deff 27.12.2012 07:12

Цитата:

Сообщение от prowoke
и через вычисления выравнить. Но всё это выдаёт не рабочую область браузера, а область документа.

Ну дак трансформируйте документ, а не body

$("html").css({ zoom: 0.65, transform: "scale(0.65)", transformOrigin: "0 0" });
	$("html").css({"-moz-transform": "scale(0.65)"}); // для FireFox
        
        if ($.browser.opera) {
		$("html").css({"-o-transform": "scale(0.65)"});
        }
	$("html,body").css({"margin":"0 auto"});

Ксать зачем масштабирование делать скриптом ? (А не через стиль?

prowoke 27.12.2012 08:09

Цитата:

Сообщение от Deff (Сообщение 223788)
Ну дак трансформируйте документ, а не body

$("html").css({ zoom: 0.65, transform: "scale(0.65)", transformOrigin: "0 0" });
	$("html").css({"-moz-transform": "scale(0.65)"}); // для FireFox
        
        if ($.browser.opera) {
		$("html").css({"-o-transform": "scale(0.65)"});
        }
	$("html,body").css({"margin":"0 auto"});

Ксать зачем масштабирование делать скриптом ? (А не через стиль?

Я так же думал. Сейчас и ваш код попробовал. Не помогло. Посмотрите в firefox. Он считает, html страницу только половину окна браузера занимает и относительно неё и центрирует. Посмотрите в firebug. Я и в гугле не могу найти про эту. Такое ощущение, что это косяк браузера.

А ещё IE не воспринимает если я масштабирую html, его только body устраивает, поэтому сделал так:

$("html,body").css({"margin":"0 auto"});
	$("html").css({ zoom: 0.65, transform: "scale(0.65)", transformOrigin: "0 0" });
	$("html").css({"-moz-transform": "scale(0.65)"});
	
	if ($.browser.msie) {
	
		$("body").css({ zoom: 0.65, transform: "scale(0.65)", transformOrigin: "0 0" });	
		if ($.browser.version == 8.0) {
			$("body").css({ zoom: 0.55, transform: "scale(0.55)", transformOrigin: "0 0" });
		}
	
	}
	
	if ($.browser.opera) {
		$("body").css("marginTop", "-150px");
		$("html").css({"-o-transform": "scale(0.65)"});
	}


А через js стили ставлю, потому, что везде по разному надо масштабировать. В ie 8, например, надо 0.55, а не 0.65. А в 7, кстати, вообще zoom не работает, ну и ладно.

Deff 27.12.2012 14:40

Цитата:

Сообщение от prowoke
Он считает, html страницу только половину окна браузера занимает и относительно неё и центрирует.

<style>
html {
 width:200%;
}
</style>
- Такое не помогает ?


Часовой пояс GMT +3, время: 11:35.