양식이 내 iPhone 화면의 너비까지 줄어들지 않습니다.

Question

내 사이트에 메모 작성 양식이 너무 넓어서 나머지 페이지가 축소됩니다. flickr을 참조하십시오. 나는 이유를 알 수 없다. 그러나 나는 다른 질문을 보는 것에서 fieldset 요소의 사용과 관련이 있다고 생각한다. 그러나 그것은 실제로 올바른 폭입니까?

양식은 https://jonnybarnes.uk/notes/new

타당한 코드에서 찾을 수 있습니다, HTML :

이

<meta name="viewport" content="width=device-width"> 
<form action="/notes/new" method="post" enctype="multipart/form-data" accept-charset="utf-8" id="newnote"> 
    <fieldset class="note-ui"> 
    <legend>New Note</legend> 
    <label for="in-reply-to" accesskey="r">Reply-to: </label><input type="text" name="in-reply-to" id="in-reply-to" placeholder="in-reply-to-1 in-reply-to-2 …"> 
    <label for="note" accesskey="n">Note: </label><textarea name="note" id="note" placeholder="Note"></textarea> 
    <label for="webmentions" accesskey="w">Send webmentions: </label><input type="checkbox" name="webmentions" id="webmentions" checked="checked"> 
    <label for="twitter" accesskey="t">Twitter: </label><input type="checkbox" name="twitter" id="twitter"> 
    <label for="photo" accesskey="p">Photo: </label><input type="file" accept="image/*" value="Upload" name="photo" id="photo"> 
    <label for="locate" accesskey="l"></label><input type="button" name="locate" id="locate" value="Locate"> 
    <label for="kludge"></label><input type="submit" value="Submit"> 
    <div class="geo-status"></div> 
    </fieldset> 
</form> 

CSS :

이

form { 
    width: 100%; 
} 
fieldset { 
    min-width: 0; 
    width: 100%; 
} 

플리커 : https://www.flickr.com/photos/22212133@N03/15659029727/

Answer 1

가장 좋은 방법이가있다 달성하기 만약 당신이 정말로 익숙하지 않다면 부트 스트랩을 사용하십시오. CSS 미디어 쿼리를 사용하거나 간단하고 신속하게 작업을 수행 할 수 있습니다.

당신은 당신이 당신의 양식에 사용됩니다 믿고 각 장치에 대한 사용자 정의 폭으로 자신의 미디어 쿼리를 추가 할 수 있습니다 사용자 정의 작업을 수행 할 경우

예 :

/* Smartphones (portrait and landscape)*/ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 
/* Styles */ 
} 

/* Smartphones (landscape) */ 
@media only screen 
and (min-width : 321px) { 
/* Styles */ 
} 

/* Smartphones (portrait) */ 
@media only screen 
and (max-width : 320px) { 
/* Styles */ 
} 

을/* Styles * /를 참조하십시오. 각 쿼리마다 보드 전체에 사용자 정의 스타일을 추가 할 수 있습니다. MQS로 많은 사람들을 도왔다

좋은 사이트가 도움이 http://css-tricks.com/css-media-queries/

희망입니다!