[HTML]textarea 자동 확대 관련해서

아래 코드처럼 textarea가 있으면 모바일에서 자동 확대가 되어 화면에 안맞춰지는 문제가 있다.

            <tr>
                <td align="center">내용</td>
                <td><textarea name="content" rows="13" cols="40">${board.content}</textarea></td>
            </tr>

첫번째 사진이 textarea가 화면에 다 들어오도록 작업을 안한 것이고

두번째 사진은 textarea가 화면에 다 들어오도록 작업을 한 것이다.

작업을 해야지 아래와 같이 화면에 모든 구성이 다 들어오게 볼 수 있다.

우선 meta name=viewport에 아래와 같이 추가를 해주고

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

textarea는 아래와 같이 style 코드 처리를 해준다.

width 처리를 해주었다.

            <tr>
                <td align="center">내용</td>
                <td><textarea name="content" style="width: 95%;height: 200px;"></textarea></td>
            </tr>

위와 같이 처리해주면 위의 2번째 사진처럼 한 화면에 전체가 들어오고 화면 크기에 맞춰서 조절된다.

아래는 전체 코드이다.

<%@include file="indexTop.jsp" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<meta charset="UTF-8">
<%@taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<div class="w3-main" style="margin-left:340px;margin-right:40px; margin-top:80px;">
    <form action="/insertBoard.do" method="post">
        <table border="1" width="50%">
            <tr>
                <td width="70" align="center">이름</td>
                <td width="100"><input type="text" name="writer"></td>
            </tr>
            <tr>
                <td align="center">제목</td>
                <td><input type="text" name="subject" size="20"></td>
            </tr>
            <tr>
                <td align="center">Email</td>
                <td><input type="text" name="email"></td>
            </tr>
            <tr>
                <td align="center">내용</td>
                <td><textarea name="content" style="width: 95%;height: 200px;"></textarea></td>
            </tr>
            <tr>
                <td align="center">비밀번호</td>
                <td><input type="password" name="passwd"></td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="submit" value="글쓰기">
                    <input type="button" value="글목록" onclick="window.location='/getListBoard.do'">
                </td>
            </tr>
        </table>
    </form>
<%@include file="/indexBottom.jsp" %>