Как сохранить постоянный размер ‹div› при увеличении и уменьшении масштаба страницы пользователем?

Есть ли способ html / css / javascipt поддерживать ‹div> постоянного размера перед лицом увеличения и уменьшения масштаба страницы пользователем? То есть использование Ctrl-плюс для увеличения размера текста и Control-минус для его уменьшения.

РЕДАКТИРОВАТЬ: Проблема, я полагаю, в том, что я хочу, чтобы содержимое в ‹div> тоже оставалось того же размера.

Спасибо!

РЕДАКТИРОВАТЬ: Моей целью было (и есть) не дать AdSense ‹div> расшириться настолько, чтобы скрыть большую часть реального содержания на странице. Но пришло время узнать (спасибо @thirtydot), что на самом деле нет хорошего способа сделать это. Ответ для меня (спасибо, @Neal!): Дать ‹div> overflow: scroll, чтобы пожертвовать его содержанием, а не контентом, который я пытаюсь показать.


person Pete Wilson    schedule 24.05.2011    source источник
comment
Вы хотите сохранить фиксированную ширину и высоту в пикселях или фиксированный размер относительно размера окна браузера?   -  person LeeR    schedule 25.05.2011
comment
опубликуйте код, с которым вы имеете дело, вроде открытого. Вы имеете в виду постоянный относительный (по отношению к области просмотра) размер или постоянный, как при использовании пикселей?   -  person colinross    schedule 25.05.2011
comment
Как пользователь меняет размер? Вы имеете в виду масштабирование или изменение размера окна браузера?   -  person robertc    schedule 25.05.2011
comment
@lee @colinross - константа шириной 1,255 микрогранул.   -  person Pete Wilson    schedule 25.05.2011
comment
@robertc - Я имел в виду (и имел в виду) масштабирование, а не изменение размера области просмотра. Извините за беспорядочную фразеологию.   -  person Pete Wilson    schedule 25.05.2011
comment
Я знал, что вы имели в виду, только по названию вопроса, не понимая, почему другим людям это трудно понять.   -  person Wesley Murch    schedule 25.05.2011
comment
@ Уэсли Марч - Спасибо [всхлипывает!] Уэсли!   -  person Pete Wilson    schedule 25.05.2011
comment
Зачем вам когда-либо вводить пользователей в заблуждение? Это похоже на блокировку щелчка правой кнопкой мыши на вашем сайте или открытие каждой ссылки в модальном окне с iframe на вашем сайте -_-   -  person Oscar Godson    schedule 25.05.2011
comment
@PeteWilson: Но теперь я вижу, что вы сначала сказали изменить размер, что неверно.   -  person Wesley Murch    schedule 25.05.2011
comment
@WesleyMurch Вы имеете в виду заголовок вопроса сейчас или заголовок вопроса до того, как он был отредактирован?   -  person robertc    schedule 25.05.2011
comment
@Oscar Godson - Я хочу un -запутать посетителя: я наконец отредактировал цель этого вопроса, который успокоил бы вас, если бы вы видеть.   -  person Pete Wilson    schedule 26.05.2011
comment
Я знаю цель и понял с первого раза, но всегда брать функциональные возможности браузера и менять их - плохая идея. Как я уже сказал, щелкните правой кнопкой мыши или установите ctrl / cmd + p, чтобы открыть новое окно или что-то в этом роде. Если масштабирование (cmd / ctrl ++, верно?) И оно не масштабируется должным образом, например, при изменении структуры сайта, вы действительно должны отправить его как отчет об ошибке, потому что он должен увеличивать масштаб, а не изменять структуру .   -  person Oscar Godson    schedule 26.05.2011


Ответы (6)


Нет хорошего способа (читай: надежного) сделать это. Извините.

То, что вы просите, в основном сводится к определению уровня масштабирования браузера, и здесь есть отличный ответ (подтверждающий, насколько это сложно):

Как указано в этом ответе, существует «своего рода» кроссбраузерный безумный способ, связанный с использованием Flash, но есть и недостатки:

  • Он использует Flash.
  • Это ненадежно, если пользователь загружает вашу страницу уже в увеличенном виде.
  • Он использует Flash. Да, это так плохо, что я сказал это дважды. Подумайте обо всех этих iPhone / iPad.

Во всяком случае, он здесь:
http://blog.sebastian-martens.de/2009/12/how-to-detect-the-browser-zoom-level-change-browser-zoo/

person thirtydot    schedule 24.05.2011
comment
Благодарю. Я прочитал эти страницы - мне не нужен еще кошмар. - person Pete Wilson; 25.05.2011

Я не уверен, что вы имеете в виду, просто используйте css:

div#id {
    width: 100px; /*or some other #*/
    height: 100px; /*or some other #*/
}

html:

<div id="id">some content</div>
person Naftali aka Neal    schedule 24.05.2011
comment
Надеюсь, я ошибаюсь, но браузеры, похоже, изменяют размер всего контента, включая контент с размерами пикселей. Не только в пикселях, но и в любых абсолютных размерах. Пожалуйста, осуществи мои надежды - скажи, что я ошибаюсь! - person Pete Wilson; 25.05.2011
comment
@Pete, браузеры только resize содержимое, когда содержимое внутри больше, чем указано. вы можете добавить overflow: hidden в css, чтобы скрыть все, что находится за пределами границ - person Naftali aka Neal; 25.05.2011
comment
@Pete - Вы имеете в виду, что когда пользователь увеличивает масштаб окна браузера, вы хотите, чтобы элемент оставался того же абсолютного размера? - person james6848; 25.05.2011
comment
@ james6848 - да, вот что я имею в виду. Черт возьми, я должен был сказать «увеличить» вместо «изменить размер». Я отредактирую это прямо сейчас. - person Pete Wilson; 25.05.2011

Чтобы сделать размер div инвариантным для масштабирования (но не содержимого внутри него), сделайте следующее:
Внутри вашего css для этого div:

минимальная ширина: 100%;
максимальная ширина: 100%;

Это заморозит ширину, вы можете сделать то же самое и для высоты.

person Hemanth Malla    schedule 05.02.2014

Вы должны просто иметь возможность установить ширину и высоту в CSS, используя измерение в пикселях.

Eg

div
{
width:100px; height:200px;
}
person isNaN1247    schedule 24.05.2011

Я прочитал в другом посте решение, которое еще не тестировал ...

Сохранять размер div (относительно экрана), несмотря на уровень масштабирования браузера

что используемый javascript:

//This floating div function will cause a div to float in the upper right corner of the screen at all times. However, it's not smooth, it will jump to the proper location once the scrolling on the iPhone is done. (On my Mac, it's pretty smooth in Safari.) 

function flaotingDiv(){

    //How much the screen has been zoomed.
    var zoomLevel = ((screen.width)/(window.innerWidth));
    //By what factor we must scale the div for it to look the same.
    var inverseZoom = ((window.innerWidth)/(screen.width));
    //The div whose size we want to remain constant.
    var h = document.getElementById("fontSizeDiv");

    //This ensures that the div stays at the top of the screen at all times. For some reason, the top value is affected by the zoom level of the Div. So we need to multiple the top value by the zoom level for it to adjust to the zoom. 
    h.style.top = (((window.pageYOffset) + 5) * zoomLevel).toString() + "px";

    //This ensures that the window stays on the right side of the screen at all times. Once again, we multiply by the zoom level so that the div's padding scales up.
    h.style.paddingLeft = ((((window.pageXOffset) + 5) * zoomLevel).toString()) + "px";

    //Finally, we shrink the div on a scale of inverseZoom.
    h.style.zoom = inverseZoom;

}

//We want the div to readjust every time there is a scroll event:
window.onscroll = flaotingDiv;
person Diego Mariano    schedule 17.09.2013

person    schedule
comment
Если кому-то нужна причина, по которой это работает, так это потому, что, когда пользователь увеличивает масштаб, ширина области просмотра уменьшается, а размер контента увеличивается. Это означает, что в данном случае все остается прежним, и все они живут долго и счастливо после конца. - person corn on the cob; 22.10.2020