Как сохранить постоянный размер <div>при увеличении и уменьшении масштаба страницы? - PullRequest
Новая
       24

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

5 голосов
/ 25 мая 2011

Существует ли способ html / css / javascipt для поддержания

в постоянном размере, если пользователь увеличивает или уменьшает масштаб страницы?То есть, используя control-plus для увеличения размера текста и control-minus для его уменьшения.

РЕДАКТИРОВАТЬ: Мне кажется, кикер в том, что я хочу содержание из

также остается неизменным.

Спасибо!

РЕДАКТИРОВАТЬ: Моя цель состояла (и есть) вне позволяйте AdSense

расширяться настолько, чтобы скрыть реальный контент на странице.Но узнайте (спасибо @thirtydot), что действительно нет хорошего способа сделать это.Ответ, для меня (спасибо @Neal!): Дайте переполнение
: прокрутка, чтобы пожертвовать его содержанием, а не контентом, который я пытаюсь показать.

Ответы [ 5 ]

1 голос
/ 05 февраля 2014

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

min-width: 100%;
max-width: 100%;

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

1 голос
/ 25 мая 2011

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

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

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

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

В любом случае, это здесь:
http://blog.sebastian -martens.de / 2009/12 / как к детектировать-The-браузер-зум-уровень переключающего браузера зоопарк /

1 голос
/ 25 мая 2011

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

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

HTML: 

<div id="id">some content</div>
0 голосов
/ 17 сентября 2013

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

Сохранение размера 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;
0 голосов
/ 25 мая 2011

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

Например 

div
{
width:100px; height:200px;
}
...