时间戳

首页 > 解决方案 > 如何在 chrome web view 输入文本中获取基本 html 以像其他文本元素或坏 chrome 用户代理一样缩放？

html - 如何在 chrome web view 输入文本中获取基本 html 以像其他文本元素或坏 chrome 用户代理一样缩放？

问题描述

在一个简单的 html 页面上工作 - 并在 web 视图中注意到输入框和相关标签没有像其他文本元素一样缩放到视图，奇怪的行为？

Web 视图是物理电话（像素 2）和桌面 chrome 移动仿真。机器人显示输入框要小得多，实际上它会缩放所有其他元素，主要是文本（dl/spans）从 16px 到 29.3px

只有添加的css是设置font-family，禁用它没有区别。

当复制标签并放置在页面上的其他位置时，它会缩放。

默认chrome（据我所知，除非插件导致问题）Chromes用户代理在输入上有很多css。这只是糟糕的 chrome 默认 css，还是元数据中可能缺少一些东西来帮助缓解这个问题

此图像顶部附近的输入。左边是模拟网络视图，但在硬件设备上遇到同样的问题。右侧是正常的桌面视图。

铬浏览器。FireFox 似乎没有表现出这种行为。尝试在 JSFiddle 中运行，但无法显示相同的问题。

<html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>My Comics</title>
    <style>
        body {
            font-family: 'Courier New', Courier, monospace
        }
    </style>
</head>

<!-- next task:  On edit - fill with that issues details -->

<body>
    <header>
        <nav>
            <ul>
                <li>Menu item</li>
            </ul>
        </nav>
    </header>

    <h1>My Comics JSON</h1>
    <input type="file" accept=".json" id="global-load">

    <label for="search-series">Series</label>
    <input type="text" id="search-series" class="search-input" data-search="Series">
    <label for="search-issue">Issue</label>
    <input type="text" id="search-issue" class="search-input" data-search="IssueID">
    <label for="search-issue">All</label>
    <input type="text" id="search-depth" class="search-input" data-search="Depth">
    <i id="search-state" style="display: none;">searching...</i>

    <div id="stats">
        <label>Series</label><h1>View Stats</h1>
        <dl>
            <dt>Series</dt><dd class="stat-info Series">0</dd>
            <dt>Have</dt><dd class="stat-info Have">8</dd>
            <dt>Issues</dt><dd class="stat-info Issues">8</dd>
            <dt>Duplicates</dt><dd class="stat-info Dups">0</dd>
        </dl>
    </div>

    <div id="main-body">
            <section>
                <h1 class="Name">X-23 vol. 3 (2018)</h1>
                <ul class="Issues">
                
            <li>
                <input class="Have" title="I have" type="checkbox"> 
                #<span class="IssueID">1</span> 
                <span class="CoverDate" data-format="[$]">[___ 2018]</span>
                <span class="Title"></span> 
                <span class="Type"></span> 
                <span class="Collection"></span>  
                <span class="Paid">£4.20</span>  
                <span class="Where">Travelling Man, Manchester</span>  
                <span class="When">2018-08-11</span>  
                <!-- <span class="Purchase"></span> <button class='edit'>edit</button> -->
            </li>
        
            <li>
                <input class="Have" title="I have" type="checkbox"> 
                #<span class="IssueID">2</span> 
                <span class="CoverDate" data-format="[$]">[___ 2018]</span>
                <span class="Title"></span> 
                <span class="Type"></span> 
                <span class="Collection"></span>  
                <span class="Paid">£3.30</span>  
                <span class="Where">Forbidden Planet International, Manchester</span>  
                <span class="When">2018-09-15</span>  
                <!-- <span class="Purchase"></span> <button class='edit'>edit</button> -->
            </li>
        
            
        
            
        
            
        
            
        
            
        
            
        </ul>
            </section>
        </div>
    
    <div id="series-view">
    
    </div>
    
    <div id="item-view">
    
    </div>
    
    <div id="series-edit">
    
    </div>
    
    <!--
    <div id="item-edit">
        <form class="edit">
            <ul>
                <li><input type="text" class="key" value="IssueID" readonly><input type="number" class="value"></li>
                <li><label><input class="Have" data-Property="Have" title="I have" type="checkbox" /> Have</label></li>
                <li><input type="text" class="key" value="Paid"><input type="text" class="value"></li>
                <li><input type="text" class="key" value="Where"><input type="text" class="value"></li>
                <li><input type="text" class="key" value="When"><input type="text" class="value"></li>
                <li><input type="text" class="key" ><input type="text" class="value"></li>
                <li><button type="button" id="edit-add-kvp">Add Detail</button></li>
            </ul>
            <input class="edit-apply" type="submit" value="Apply" />
        </form>
    </div>-->
    
    <div style="display:none">
        <template id="series-template">
            <section>
                <h1 class="Name"></h1>
                <ul class="Issues">
                </ul>
            </section>
        </template>
        <template id="series-issue">
            <li>
                <input class="Have" title="I have" type="checkbox"> 
                #<span class="IssueID"></span> 
                <span class="CoverDate" data-format="[$]"></span>
                <span class="Title"></span> 
                <span class="Type"></span> 
                <span class="Collection"></span>  
                <span class="Paid"></span>  
                <span class="Where"></span>  
                <span class="When"></span>  
                <!-- <span class="Purchase"></span> <button class='edit'>edit</button> -->
            </li>
        </template>
        <template id="edit-issue">
            <form class="edit">
                <ul>
                    <li><input type="text" class="key" value="IssueID" readonly=""><input type="number" class="value"></li>
                    <li><label><input class="Have" data-property="Have" title="I have" type="checkbox"> Have</label></li>
                    <li><input type="text" class="key" value="Paid"><input type="text" class="value"></li>
                    <li><input type="text" class="key" value="Where"><input type="text" class="value"></li>
                    <li><input type="text" class="key" value="When"><input type="text" class="value"></li>
                    <li><input type="text" class="key"><input type="text" class="value"></li>
                    <li><button type="button" id="edit-add-kvp">Add Detail</button></li>
                </ul>
                <input class="edit-apply" type="submit" value="Apply">
            </form>
        </template>
    </div>
    
    <footer>
        <ul>
            <li><a href="#">Help Center</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Sitemap</a></li>
        </ul>
        <h5>a MazeEditing attempt</h5>
<!--        <img src="facebook-logo.png">
        <img src="twitter-logo.png">
        <img src="linkedin-logo.png"> -->
    </footer>

</body></html>

标签： htmlcss

解决方案

您需要在<head>标签内添加以下行：

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

此meta标签为浏览器提供了缩放内容的说明，您应该将其包含在所有网页中。该content属性设置宽度以匹配查看设备，并initial-scale设置页面加载时的初始缩放。

推荐阅读