fix: モバイル表示のときページ下部がナビゲーションバーに隠れる問題を修正 (#110)
* fix: insert bottom spacing appropriately * Revert CHANGELOG.md --------- Co-authored-by: ibuki2003 <main@fuwa.dev>
This commit is contained in:
		| @@ -6,11 +6,13 @@ | |||||||
| 	--marginHalf: 10px; | 	--marginHalf: 10px; | ||||||
|  |  | ||||||
| 	--margin: var(--marginFull); | 	--margin: var(--marginFull); | ||||||
| 	--minBottomSpacing: 0px; |  | ||||||
|  | 	// switch dynamically | ||||||
|  | 	--minBottomSpacingMobile: calc(72px + max(12px, env(safe-area-inset-bottom, 0px))); | ||||||
|  | 	--minBottomSpacing: var(--minBottomSpacingMobile); | ||||||
|  |  | ||||||
| 	@media (max-width: 500px) { | 	@media (max-width: 500px) { | ||||||
| 		--margin: var(--marginHalf); | 		--margin: var(--marginHalf); | ||||||
| 		--minBottomSpacing: calc(72px + max(12px, env(safe-area-inset-bottom, 0px))); |  | ||||||
| 	} | 	} | ||||||
|  |  | ||||||
| 	//--ad: rgb(255 169 0 / 10%); | 	//--ad: rgb(255 169 0 / 10%); | ||||||
|   | |||||||
| @@ -207,9 +207,11 @@ watch($$(navFooter), () => { | |||||||
| 	if (navFooter) { | 	if (navFooter) { | ||||||
| 		navFooterHeight = navFooter.offsetHeight; | 		navFooterHeight = navFooter.offsetHeight; | ||||||
| 		document.body.style.setProperty('--stickyBottom', `${navFooterHeight}px`); | 		document.body.style.setProperty('--stickyBottom', `${navFooterHeight}px`); | ||||||
|  | 		document.body.style.setProperty('--minBottomSpacing', 'var(--minBottomSpacingMobile)'); | ||||||
| 	} else { | 	} else { | ||||||
| 		navFooterHeight = 0; | 		navFooterHeight = 0; | ||||||
| 		document.body.style.setProperty('--stickyBottom', '0px'); | 		document.body.style.setProperty('--stickyBottom', '0px'); | ||||||
|  | 		document.body.style.setProperty('--minBottomSpacing', '0px'); | ||||||
| 	} | 	} | ||||||
| }, { | }, { | ||||||
| 	immediate: true, | 	immediate: true, | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user
	 まっちゃとーにゅ
					まっちゃとーにゅ