Як можна збільшити елемент HTML у Firefox та Opera?

Question 1

zoomВластивість працює в IE, Google Chrome і Safari, але це не працює в Firefox і Opera.

Чи існує якийсь спосіб додати цю властивість до Firefox та Opera?

Question 2

Спробуйте цей код, це спрацює:

-moz-transform: scale(2);

Ви можете посилатися на це .

Question 3

Масштабування та масштабування трансформації - це не одне і те ж. Вони застосовуються в різний час. Масштабування застосовується до рендерингу, трансформація - після. Результат цього полягає в тому, що ви берете div з шириною / висотою = 100%, вкладеним всередину іншого div, з фіксованим розміром; якщо застосувати масштабування, все усередині вашого внутрішнього масштабування зменшиться або зросте, але якщо застосувати, перетворіть весь ваш внутрішній div зменшиться (навіть якщо ширина / висота встановлені на 100%, вони не будуть 100% після перетворення).

Question 4

Для мене це працює, щоб протиставити різницю між масштабуванням і перетворенням масштабу, відрегулюйте бажане початкове джерело:

zoom: 0.5;
-ms-zoom: 0.5;
-webkit-zoom: 0.5;
-moz-transform:  scale(0.5,0.5);
-moz-transform-origin: left center;

Question 5

Використовуйте scaleзамість цього! Після багатьох досліджень та тестів я зробив цей плагін для досягнення крос-браузера:

$.fn.scale = function(x) {
    if(!$(this).filter(':visible').length && x!=1)return $(this);
    if(!$(this).parent().hasClass('scaleContainer')){
        $(this).wrap($('<div class="scaleContainer">').css('position','relative'));
        $(this).data({
            'originalWidth':$(this).width(),
            'originalHeight':$(this).height()});
    }
    $(this).css({
        'transform': 'scale('+x+')',
        '-ms-transform': 'scale('+x+')',
        '-moz-transform': 'scale('+x+')',
        '-webkit-transform': 'scale('+x+')',
        'transform-origin': 'right bottom',
        '-ms-transform-origin': 'right bottom',
        '-moz-transform-origin': 'right bottom',
        '-webkit-transform-origin': 'right bottom',
        'position': 'absolute',
        'bottom': '0',
        'right': '0',
    });
    if(x==1)
        $(this).unwrap().css('position','static');else
            $(this).parent()
                .width($(this).data('originalWidth')*x)
                .height($(this).data('originalHeight')*x);
    return $(this);
};

usege:

$(selector).scale(0.5);

Примітка:

Це створить обгортку з класом scaleContainer. Подбайте про це під час оформлення вмісту.

Question 6

zoom: 145%;
-moz-transform: scale(1.45);

використовуйте це, щоб бути на більш безпечній стороні

Question 7

Я б змінив zoomдля transformвсіх випадків, оскільки, як пояснюється іншими відповідями, вони не є рівнозначними. У моєму випадку також потрібно було застосувати transform-originмайно для розміщення предметів там, де я хотів.

Це працювало для мене в Chome, Safari та Firefox:

transform: scale(0.4);
transform-origin: top left;
-moz-transform: scale(0.4);
-moz-transform-origin: top left;

Question 8

Це не однаково працює у всіх браузерах. Я зайшов на: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_pulpitimage і додав стиль для збільшення та -moz-перетворення. Я запустив той самий код на firefox, IE та chrome і отримав 3 різні результати.

<html>
<style>
body{zoom:3;-moz-transform: scale(3);}
</style>
<body>

<h2>Norwegian Mountain Trip</h2>
<img border="0" src="/images/pulpit.jpg" alt="Pulpit rock"  />

</body>
</html>

Question 9

Я давно вже лаявся з цим. Zoom - це точно не рішення, він працює в chrome, він працює частково в IE, але переміщує весь html div, firefox нічого не робить.

Моє рішення, яке працювало для мене, було використання як масштабування, так і перекладу, а також додавання вихідної висоти та ваги, а потім встановлення висоти та ваги самого div:

#miniPreview {
transform: translate(-710px, -1000px) rotate(0rad) skewX(0rad) scale(0.3, 0.3);
transform-origin: 1010px 1429px 0px;
width: 337px;
height: 476px;

Очевидно, змініть їх на власні потреби. Це дало мені однаковий результат у всіх браузерах.

Question 10

спробуйте цей код, щоб збільшити всю сторінку у fireFox

-moz-transform: scale(2);

якщо я використовую цей код, вся сторінка, масштабована прокруткою y та x, неправильно масштабується

so Sorry to say fireFox not working well using "-moz-transform: scale(2);"

**

Просто ви не можете збільшити сторінку за допомогою css у fireFox

**

Question 11

чи це правильно працює для вас? :

zoom: 145%;
-moz-transform: scale(1.45);
-webkit-transform: scale(1.45);
scale(1.45);
transform: scale(1.45);

Question 12

Для мене це добре працює з IE10, Chrome, Firefox та Safari:

   #MyDiv>*
   {
        zoom: 50%;
        -moz-transform: scale(0.5);
        -webkit-transform: scale(1.0);
   }

Це збільшує весь вміст до 50%.

Question 13

Єдиною правильною та сумісною з W3C відповіддю є: <html>object і rem. перетворення не працює належним чином, якщо зменшити масштаб (наприклад, масштаб (0,5).

Використання:

html
{
   font-size: 1mm; /* or your favorite unit */
}

і використовуйте в коді одиницю "rem" (включаючи стилі для <body>) замість метричних одиниць. "%" s без змін. Для всіх фонів встановіть розмір фону. Визначте розмір шрифту для тіла, яке успадковується іншими елементами.

якщо виникає будь-яка умова, яка спрацьовує, масштабування, відмінне від 1,0, змінює розмір шрифту для тегу (через CSS або JS).

наприклад:

@media screen and (max-width:320pt)
{
   html
   {
      font-size: 0.5mm; 
   }
}

Це робить еквівалент масштабу: 0,5 без проблем у JS з clientX та позиціонуванням під час подій перетягування.

Не використовуйте "rem" у медіа-запитах.

Вам дійсно не потрібно масштабування, але в деяких випадках це може бути швидшим методом для існуючих сайтів.