2017-10-16 8 views
-1

최저 너비 767px의 디자인을 받았습니다. 디자인은 폭이 다소 긴 "텍스트"이며이 텍스트는 배경에 맞게 잘 조정됩니다.장치의 최소 너비 및 높이를 낮추는 방법

이 767px 디자인을 사용할 수있는 가장 작은 디자인으로 만드는 가장 좋은 방법은 무엇입니까? 낮은 너비는 수직 스크롤바를 수신하지 않아야하지만 해당 장치의 초기로드에서 최소 너비로 확장되어야합니다.

<meta name="viewport" content="width=device-width, min-width=767px, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> 

을하지만 내가 원하는처럼 작동하지 않습니다

나는 메타 뷰포트 태그를 조정하여이 문제를 해결하기 위해 노력했다. 어떤 아이디어?

+0

당신은 피들을 게시하고 좀 더 설명 할 수 있습니까? ? – Roysh

답변

0

:

var MIN_WIDTH = 767; 
var viewport = document.createElement("meta"); 
viewport.setAttribute("name", "viewport"); 
if (screen.width < MIN_WIDTH) { 
    viewport.setAttribute("content", "width=" + MIN_WIDTH); 
} else { 
    viewport.setAttribute("content", "width=device-width, initial-scale=1"); 
} 
document.head.appendChild(viewport); 

이 화면 폭이 뷰포트 메타 태그로 조정 미만 767px 경우 내가 필요한 exaclty 않습니다 content = "width = 767" 화면 너비가 767px이고 처음로드시 페이지가 100 %로 축소되고 올바른 확대/축소 수준으로 축소 된 기기

-1
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

이 코드는 html 문서의 <head> 부분 안쪽에 있어야한다. 이 코드를 사용하고 your_class_name을 클래스 이름으로 바꿉니다.

@media only screen and (max-width: 768px) { 
    /* For mobile phones: */ 
    .your_class_name { 
     width: 100%; 
    } 
} 

희망이 있습니다.

내가 더 상세한 검색을했고, 내가 여기 https://www.brendanlong.com/setting-a-minimum-viewport-width-for-responsive-pages.html 필요한 것을 발견했습니다