Проблемный контекст < /h2>
У меня есть Div с специально отформатированным HTML -текстом. Текст меняется ежедневно, не имеет установленной длины на строку, и мне нужно сохранить точное форматирование текста. В настоящее время я масштабирую размер шрифта текста, чтобы соответствовать ширине его родительского Div, даже если размер шрифта слишком мал. Пользователь может масштабировать, чтобы прочитать текст. Изменения ориентации. Переключение панели браузера фактически меняет значение div < /code> s innerwidth < /code>, и я не уверен, как обойти это. PrettyPrint-Override ">// Grab the width of the viewport on startup, this is used for restyling the fire weather forecast text
let lastWidth = window.innerWidth;
window.addEventListener("DOMContentLoaded", () => {
const fireWeatherCard = document.getElementById("forecast-card");
const fireWeatherText = document.getElementById("forecast-text");
window.addEventListener("resize", () => {
// Only change the forecast text size on orientation changes or browser changes, exclude:
// - height changes
// - mobile browser bar hiding/showing (this triggers changes in both width and height)
const currentWidth = window.innerWidth;
const widthChange = Math.abs(currentWidth - lastWidth);
if (widthChange < 25) {
lastWidth = currentWidth;
return;
}
adjustFireWeatherTextStyling(fireWeatherCard, fireWeatherText);
lastWidth = currentWidth;
});
});
function adjustFireWeatherTextStyling(
fireWeatherCard,
fireWeatherText
) {
// Force the text to be our max desired font size and the text to be left aligned
fireWeatherText.style.fontSize = "14px";
fireWeatherCard.style.alignItems = "start";
// Step 1: Adjust the font size
let size = 14;
while (fireWeatherText.scrollWidth > fireWeatherCard.clientWidth) {
size = parseInt(fireWeatherText.style.fontSize, 10);
fireWeatherText.style.fontSize = (size - 1).toString() + "px";
}
// Knock it down 1 extra pixel size just so we have padding all around
fireWeatherText.style.fontSize = (size - 2).toString() + "px";
fireWeatherCard.style.alignItems = "center";
}< /code>
#forecast-card {
display: flex;
flex-direction: column;
align-items: start;
justify-content: flex-start;
margin: 2rem auto 0 auto;
background: rgba(30, 32, 35, 0.8);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
overflow-x: scroll;
padding: 1rem 0;
}
#forecast-text {
font-family: monospace;
color: white;
line-height: 1.6;
white-space: pre;
margin: 0 0.5rem;
box-sizing: border-box;
font-size: 14px;
}< /code>
Fire Weather Discussion
FNUS56 KMFR 252130
FWFMFR
Fire Weather Forecast for southern Oregon and northern California
National Weather Service Medford, OR
230 PM PDT Fri Jul 25 2025
...RED FLAG WARNING REMAINS IN EFFECT UNTIL 11 PM PDT THIS
EVENING FOR ABUNDANT LIGHTNING ON DRY FUELS FOR FIRE WEATHER
ZONES 280, 281, 282, 284, 285, 624, AND 625...
.DISCUSSION...Another episode of scattered to numerous
thunderstorms is expected this evening, focused upon northern
California with activity extending into south central Oregon.
Storms will be slow-moving and produce rain, but the amount of
lightning is expected to exceed critical thresholds. Isolated
late day storms are possible for portions of the area Saturday
through Monday. The next trough may bring an enhanced risk of
thunderstorms during mid-week.
Fire Weather Forecast for CAZ282
CAZ282-CAZ282-261215-
Shasta-Trinity National Forest in Siskiyou County-
230 PM PDT Fri Jul 25 2025
...RED FLAG WARNING IN EFFECT UNTIL 11 PM PDT THIS EVENING...
.Tonight...
* Sky/weather...........Mostly cloudy with scattered showers and
thunderstorms until midnight, then partly cloudy. Haze after
midnight.
* Min temperature.......45-55.
* Max humidity..........85-100 percent valleys and 65-80 percent
ridges.
* 20-foot winds.........
* Valleys/lwr slopes...Southeast winds 5 to 10 mph. Gusts up to 25
mph in the evening.
* Ridges/upr slopes....Southeast winds 6 to 10 mph with gusts to
around 25 mph shifting to the southwest 5 to 6 mph after
midnight.
* Mixing Height.....................4000-7200 ft AGL until 2100,
then 100-1600 ft AGL.
* Chance of lightning...............44 percent.
* Chance of wetting rain (.10 in)...30 percent.
* Chance of wetting rain (.25 in)...17 percent.
&&
TEMP / HUM / POP
Mount Shasta 51 92 40
.EXTENDED...
.SUNDAY NIGHT...Mostly clear. Lows 45 to 55. West winds 5 to
8 mph.
.MONDAY...Mostly clear. Highs 75 to 85. Light winds becoming
southwest 5 to 6 mph in the afternoon and evening.
< /code>
< /div>
< /div>
< /p>
Вопрос < /h2>
Как я могу исключить браузер.>
Подробнее здесь: https://stackoverflow.com/questions/797 ... -on-mobile
Бар браузера вызывает нежелательные события изменения размера окна на мобильных устройствах ⇐ Javascript
Форум по Javascript
1755197303
Anonymous
Проблемный контекст < /h2>
У меня есть Div с специально отформатированным HTML -текстом. Текст меняется ежедневно, не имеет установленной длины на строку, и мне нужно сохранить точное форматирование текста. В настоящее время я масштабирую размер шрифта текста, чтобы соответствовать ширине его родительского Div, даже если размер шрифта слишком мал. Пользователь может масштабировать, чтобы прочитать текст. Изменения ориентации. Переключение панели браузера фактически меняет значение div < /code> s innerwidth < /code>, и я не уверен, как обойти это. PrettyPrint-Override ">// Grab the width of the viewport on startup, this is used for restyling the fire weather forecast text
let lastWidth = window.innerWidth;
window.addEventListener("DOMContentLoaded", () => {
const fireWeatherCard = document.getElementById("forecast-card");
const fireWeatherText = document.getElementById("forecast-text");
window.addEventListener("resize", () => {
// Only change the forecast text size on orientation changes or browser changes, exclude:
// - height changes
// - mobile browser bar hiding/showing (this triggers changes in both width and height)
const currentWidth = window.innerWidth;
const widthChange = Math.abs(currentWidth - lastWidth);
if (widthChange < 25) {
lastWidth = currentWidth;
return;
}
adjustFireWeatherTextStyling(fireWeatherCard, fireWeatherText);
lastWidth = currentWidth;
});
});
function adjustFireWeatherTextStyling(
fireWeatherCard,
fireWeatherText
) {
// Force the text to be our max desired font size and the text to be left aligned
fireWeatherText.style.fontSize = "14px";
fireWeatherCard.style.alignItems = "start";
// Step 1: Adjust the font size
let size = 14;
while (fireWeatherText.scrollWidth > fireWeatherCard.clientWidth) {
size = parseInt(fireWeatherText.style.fontSize, 10);
fireWeatherText.style.fontSize = (size - 1).toString() + "px";
}
// Knock it down 1 extra pixel size just so we have padding all around
fireWeatherText.style.fontSize = (size - 2).toString() + "px";
fireWeatherCard.style.alignItems = "center";
}< /code>
#forecast-card {
display: flex;
flex-direction: column;
align-items: start;
justify-content: flex-start;
margin: 2rem auto 0 auto;
background: rgba(30, 32, 35, 0.8);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
overflow-x: scroll;
padding: 1rem 0;
}
#forecast-text {
font-family: monospace;
color: white;
line-height: 1.6;
white-space: pre;
margin: 0 0.5rem;
box-sizing: border-box;
font-size: 14px;
}< /code>
Fire Weather Discussion
FNUS56 KMFR 252130
FWFMFR
Fire Weather Forecast for southern Oregon and northern California
National Weather Service Medford, OR
230 PM PDT Fri Jul 25 2025
...RED FLAG WARNING REMAINS IN EFFECT UNTIL 11 PM PDT THIS
EVENING FOR ABUNDANT LIGHTNING ON DRY FUELS FOR FIRE WEATHER
ZONES 280, 281, 282, 284, 285, 624, AND 625...
.DISCUSSION...Another episode of scattered to numerous
thunderstorms is expected this evening, focused upon northern
California with activity extending into south central Oregon.
Storms will be slow-moving and produce rain, but the amount of
lightning is expected to exceed critical thresholds. Isolated
late day storms are possible for portions of the area Saturday
through Monday. The next trough may bring an enhanced risk of
thunderstorms during mid-week.
Fire Weather Forecast for CAZ282
CAZ282-CAZ282-261215-
Shasta-Trinity National Forest in Siskiyou County-
230 PM PDT Fri Jul 25 2025
...RED FLAG WARNING IN EFFECT UNTIL 11 PM PDT THIS EVENING...
.Tonight...
* Sky/weather...........Mostly cloudy with scattered showers and
thunderstorms until midnight, then partly cloudy. Haze after
midnight.
* Min temperature.......45-55.
* Max humidity..........85-100 percent valleys and 65-80 percent
ridges.
* 20-foot winds.........
* Valleys/lwr slopes...Southeast winds 5 to 10 mph. Gusts up to 25
mph in the evening.
* Ridges/upr slopes....Southeast winds 6 to 10 mph with gusts to
around 25 mph shifting to the southwest 5 to 6 mph after
midnight.
* Mixing Height.....................4000-7200 ft AGL until 2100,
then 100-1600 ft AGL.
* Chance of lightning...............44 percent.
* Chance of wetting rain (.10 in)...30 percent.
* Chance of wetting rain (.25 in)...17 percent.
&&
TEMP / HUM / POP
Mount Shasta 51 92 40
.EXTENDED...
.SUNDAY NIGHT...Mostly clear. Lows 45 to 55. West winds 5 to
8 mph.
.MONDAY...Mostly clear. Highs 75 to 85. Light winds becoming
southwest 5 to 6 mph in the afternoon and evening.
< /code>
< /div>
< /div>
< /p>
Вопрос < /h2>
Как я могу исключить браузер.>
Подробнее здесь: [url]https://stackoverflow.com/questions/79735794/browser-bar-is-causing-undesired-window-resize-events-on-mobile[/url]
Ответить
1 сообщение
• Страница 1 из 1
Перейти
- Кемерово-IT
- ↳ Javascript
- ↳ C#
- ↳ JAVA
- ↳ Elasticsearch aggregation
- ↳ Python
- ↳ Php
- ↳ Android
- ↳ Html
- ↳ Jquery
- ↳ C++
- ↳ IOS
- ↳ CSS
- ↳ Excel
- ↳ Linux
- ↳ Apache
- ↳ MySql
- Детский мир
- Для души
- ↳ Музыкальные инструменты даром
- ↳ Печатная продукция даром
- Внешняя красота и здоровье
- ↳ Одежда и обувь для взрослых даром
- ↳ Товары для здоровья
- ↳ Физкультура и спорт
- Техника - даром!
- ↳ Автомобилистам
- ↳ Компьютерная техника
- ↳ Плиты: газовые и электрические
- ↳ Холодильники
- ↳ Стиральные машины
- ↳ Телевизоры
- ↳ Телефоны, смартфоны, плашеты
- ↳ Швейные машинки
- ↳ Прочая электроника и техника
- ↳ Фототехника
- Ремонт и интерьер
- ↳ Стройматериалы, инструмент
- ↳ Мебель и предметы интерьера даром
- ↳ Cантехника
- Другие темы
- ↳ Разное даром
- ↳ Давай меняться!
- ↳ Отдам\возьму за копеечку
- ↳ Работа и подработка в Кемерове
- ↳ Давай с тобой поговорим...
Мобильная версия