뷰포트

개발은 크롬에서 함

개발자 모드에선 height를 100vh를 하든 100% 이쁘게 잘나옴

근데 그걸 모바일 브라우저로 들어가서 보면 하단이 잘림

오 왜? 왜잘림? 

모바일 브라우저의 주소창이나 인터페이스바가 뷰포트로 포함(?) 됨

그럼 어캄? 

 mounted() {
 	this.setVh();
},
methods: {
	setVh() {
    	  // 실제 viewport 높이의 1%를 계산
      	const vh = window.innerHeight * 0.01;
      	// CSS 사용자 정의 속성 --vh를 설정
      	document.documentElement.style.setProperty('--vh', `${vh}px`);
    	},
},

요로코롬 해주믄 ㄹㅇ 뷰포트를 계산해버림

 

.mobile-container {
	height: calc(var(--vh, 1vh) * 100);
}

 

요로코롬 쓰믄댐

 

우와 신기하다 내 문제해결사 폭주기관차 김동우  바로 해결해버림 

근데 해결한 게 아님 

확대해봤더니 확대하면 뷰포트가 줄어든 걸로 계산돼서 
렌더링되는 컴포넌트 높이가 줄어들어서 화면 영역에 빈공간이 생겨버림

 

오 살려주세요 

css 잘못한 줄 알고 온갖 시도를 해봄 

컴포넌트를 나눠도 보고 합쳐도 보고 

메인 레이아웃을 fixed에서 flex로 바꿔봤다가 gird로 바꿔봤다가 뭐 해봤다가 저거해봤다가 요게 문젠가 이게 문젠가 살려주시라요

내가 퍼블리션가 이걸 왜 이렇게 붙잡고 있지 방법이 있을텐데 내가 모르는 거겠지 아니 내가 개멍청이 

고통의 시간을 보냈음

 

 

그래서 어캄?

메타태그에 이것을 달아주는 것임. 

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

 

 

근데 이건 이미 2트? 3트쯤 해봤었음
근데 왜 이걸로 해결을 했던 것이냐 ?

현재 프로젝트는 부트+뷰 인데 
부트 따로~ 뷰 따로~ 프로젝트가 아니라 
부트 디렉터리 안에 뷰가 있음

긍께 뷰를 빌드하고 부트 실행하면 뷰 서버 안돌아도 화면 잘 나옴

 

이걸 

이런 방식은 "백엔드-프론트엔드 통합 빌드 방식" 또는 **"동일 서버 배포 방식"**이라고 할 수 있습니다. 일반적으로는 **"SPA(Single Page Application) 정적 파일 통합 배포"**라고도 합니다.
이 방식에서는 Vue와 같은 프론트엔드 애플리케이션을 빌드하여 정적 파일들(HTML, CSS, JS)을 생성한 후, 이를 백엔드 서버(부트 서버)에 통합하여 한 번에 배포합니다. Spring Boot와 Vue.js 프로젝트를 이렇게 통합 배포할 경우, Vue의 빌드 결과물이 Spring Boot의 static 폴더에 저장되므로, Spring Boot가 정적 파일을 서빙하게 됩니다. 이로 인해 별도의 프론트엔드 서버를 두지 않고 Spring Boot 서버만으로도 Vue.js 애플리케이션을 함께 제공할 수 있습니다.
이를 통해 클라이언트에서 접속 시 Spring Boot 서버가 Vue 정적 리소스를 제공하게 되며, Vue는 클라이언트 사이드 라우팅 및 SPA 특성을 유지할 수 있습니다.

이라고 한다고 함. 지난 번에 물었을 땐 좀 더 그럴싸한 용어로 알려줬었던 것 같은데 ..

 

암튼 난 초반 해결에서

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

이걸 npm run build하면 나오는 
resources/static/app/index.html에 추가해줬었는데 

 

Vue CLI 프로젝트에서는 public/index.html 파일이 템플릿 역할을 합니다. 여기서 직접 메타 태그를 수정하면, 빌드 시 해당 내용이 그대로 반영됩니다. 빌드 시 동적으로 변하지 않는 고정된 메타 태그를 원하신다면, 이 파일을 수정하는 것이 가장 간단한 방법입니다.

resources/static/app/index.html는 vue/public/index.html 내용이 빌드시에 반영되는 것이었음

대충 resources/static/app/index.html 여기서 수정해도 서버 돌아가면 이거 읽고 보여줄 거 아님? 하고선 그냥 고쳐봤던 것임.

 

vue/public/index.html 에서

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

넣고 다시 빌드하고 돌려보니 화면 축소가 안됨 

 

 

 

 

암튼 해결한듯

근데 솔직히 너무 이것저것 많이 해보고 뇌정지와서 뭐가 결정적인 문제였는지 파악이 안됨 

주먹 구구식으로 고쳐보다가 때려맞춰!!! 보단

문제를 하나하나 기록하고 뭐에서 어떻게 뭐에서 저렇게 잘 기록해두고 순차적으로 해결해나가는 습관이 필요...

---

∴ 

모바일 브라우저에서 확대를 막기 위해서 일반적으로 HTML의 <meta> 태그를 통해 줌 기능을 비활성화할 수 있음!!!

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

사용자가 페이지를 확대할 수 없도록 하여, 뷰포트 크기가 변경되는 것을 방지함

 

- width=device-width: 뷰포트의 너비를 기기의 화면 너비에 맞춤.

- initial-scale=1.0: 페이지가 로드될 때 100% 배율로 시작.

- maximum-scale=1.0: 사용자가 최대 100% 배율까지만 설정 가능하게 제한.

- user-scalable=no: 사용자가 확대/축소 기능을 사용할 수 없게 설정.

 

이렇게 설정하면 확대 기능이 비활성화되어, 뷰포트가 줄어들어 생기는 여백 문제를 피할 수 있음