маштабирование iframe с видео

227

19 июля 2018, 07:30

День добрый! Возникла проблема с маштабированием окна. Есть два примера, в первом маштабируется только видео во втором полностью окно, разница в теге <meta name="viewport" content="width=device-width,height=device-height,user-scalable=no" /> в первом есть, во втором нету. Кто сможет подсказать почему так происходит.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8"> 
	<title>Document</title> 
	<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no" /> 
</head> 
<body> 
	<div style="overflow-y: auto; background-color: rgb(255, 255, 255); width: 100%;"> 
		<div style="margin: 5px; white-space: normal; text-align: right;"> 
			<font size="2" face="Trebuchet MS" color="#000000" hyphens="auto">01.01.2001 6 месяцев</font> 
		</div> 
	</div> 
	<div style="overflow-y: auto; background-color: rgb(255, 255, 255); width: 100%;"> 
		<div style="margin: 5px; white-space: normal; text-align: center;"> 
			<font size="4" face="Trebuchet MS" color="#000000" hyphens="auto">Программа для распознания альпинистских маршрутов</font> 
		</div> 
	</div>	 
	<div style="margin: 5px; white-space: normal; text-align: left;"> 
		<font size="4" face="Trebuchet MS" color="#000000" hyphens="auto">Начать?!? Наверно надо начать с того что это описание я пишу через 10 лет, и когда то я был не силен в программировании и вообще в IT. Сейчас открывая приложения я посмеялся над ляпами и моими замахами на то время. Но подобное вообще появилось лет так этак через 8, что то типа:< 
		br><br>https://www.youtube.com/watch?v=Rl-Eg21TqsA<br><br>(это один из примеров), но суть примера такая же, только я ее придумал и сделал 10 лет назад. Ну на счет сделал это наверно громко сказано, но основные моменты по поднятию высот и склейки получиных мешей (тогда я даже не знал что такое меш и даже не знал что есть такой редактор как 3DMax)))) Я сам делал себе редактор и он там как то совсем уж плохо сливал, подгонял, там файлы были по 200 метров, все в формате bmp, там на сколько я помню даже классов всего было 3 причем один, мего божественный))) Но я все равно люблю этот проект, так как именно благодаря ему я стал тем кем я стал. <br><br>Суть проекта сводилась к довольно простой логике, требовалось сделать N-количество снимков и привязать их к jps координатам.  
	</font> 
</div> 
</div> 
	<div style="overflow-y: auto; background-color: rgb(255, 255, 255); display: flex; white-space: nowrap; justify-content: center;"> 
		<div style="width: 620px; height: 480px; flex-basis: 620px; flex-shrink: 1;"> 
			<iframe frameborder="0" src="https://www.youtube.com/embed/pTpqrzGF5Hw" style="margin: 5px; width: 90%; height: 95%;"> 
				 
			</iframe> 
		</div> 
	</div> 
</body> 
</html>

<!DOCTYPE html> 
<html> 
<head> 
 
<meta charset="UTF-8"> 
<title>uptask3d</title> 
 
</head> 
 
<body > 
		<div style="overflow-y: auto; background-color: rgb(255, 255, 255); width: 100%;"> 
		<div style="margin: 5px; white-space: normal; text-align: right;"> 
			<font size="2" face="Trebuchet MS" color="#000000" hyphens="auto">01.01.2001 6 месяцев</font> 
		</div> 
	</div> 
	<div style="overflow-y: auto; background-color: rgb(255, 255, 255); width: 100%;"> 
		<div style="margin: 5px; white-space: normal; text-align: center;"> 
			<font size="4" face="Trebuchet MS" color="#000000" hyphens="auto">Программа для распознания альпинистских маршрутов</font> 
		</div> 
	</div>	 
	<div style="margin: 5px; white-space: normal; text-align: left;"> 
		<font size="4" face="Trebuchet MS" color="#000000" hyphens="auto">Начать?!? Наверно надо начать с того что это описание я пишу через 10 лет, и когда то я был не силен в программировании и вообще в IT. Сейчас открывая приложения я посмеялся над ляпами и моими замахами на то время. Но подобное вообще появилось лет так этак через 8, что то типа:< 
		br><br>https://www.youtube.com/watch?v=Rl-Eg21TqsA<br><br>(это один из примеров), но суть примера такая же, только я ее придумал и сделал 10 лет назад. Ну на счет сделал это наверно громко сказано, но основные моменты по поднятию высот и склейки получиных мешей (тогда я даже не знал что такое меш и даже не знал что есть такой редактор как 3DMax)))) Я сам делал себе редактор и он там как то совсем уж плохо сливал, подгонял, там файлы были по 200 метров, все в формате bmp, там на сколько я помню даже классов всего было 3 причем один, мего божественный))) Но я все равно люблю этот проект, так как именно благодаря ему я стал тем кем я стал. <br><br>Суть проекта сводилась к довольно простой логике, требовалось сделать N-количество снимков и привязать их к jps координатам.  
	</font> 
</div> 
</div> 
 
	<div style="overflow-y: auto; background-color: rgb(255, 255, 255); display: flex; white-space: nowrap; justify-content: center;"> 
		<div style="width: 620px; height: 480px; flex-basis: 620px; flex-shrink: 1;"> 
			<iframe frameborder="0" src="https://www.youtube.com/embed/pTpqrzGF5Hw" style="margin: 5px; width: 90%; height: 95%;">		 
			</iframe> 
		</div> 
	</div> 
 
</body> 
</html>

Хотелось бы, чтоб эта страница нормально отображалась в мобильных телефонах. Потому что, во втором варианте где нормально маштабируется видео, при сужении экрана увеличивается текст

Answer 1

Тег

<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no"/>

добавляет адаптивность странице. Для правильного масштабирования используйте @media и указанный выше тег.
Здесь вы можете прочитать про использование @media запросов.