表格不会缩小到我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%; 
} 

的flickr：https://www.flickr.com/photos/22212133@N03/15659029727/

Answer 1

最佳的方式来完成，这是如果你不熟悉，实际上使用bootstrap 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 */ 
} 

你在哪里请参阅/ *样式* /您可以为每个查询添加您的自定义样式。

大的网站，帮助了很多人与MQS是http://css-tricks.com/css-media-queries/

希望帮助！