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