Android手機上的Chrome行為與台式機Chrome模擬器上的行為不同嗎？
[英]Does Chrome on an android phone behave differently than on the desktop Chrome emulator?
問題描述
具體來說，我正在嘗試使用媒體查詢和基於百分比而不是固定像素的CSS寬度參數將我們的網站從桌面模型轉換為響應型網站。
當我使用“檢查”並使用頁面頂部的“自適應”工具更改窗口寬度時，一切看起來都很好。 但是，當我在Android手機上打開Beta測試站點時，用Font Awesome編碼的鏈接按鈕之一被分為兩行。
<asp:LinkButton ID="AddCartButton" runat="server" ToolTip="Add Items to Cart" CommandName="Cart" CommandArgument='<%# Container.DataItemIndex %>'
CssClass="whitecross dkgray" ><i class="fa " aria-hidden="true"></i> ADD TO CART </asp:LinkButton>
我和一個告訴我的人交談，他們告訴我手機使用的是基於div的Bootstrap，該類具有名為row，大12列的類，以定義屏幕的100％寬度。
我已經找到了引導程序的網站，但我想知道是否有人可以提供一個鏈接，說明手機和平板電腦如何使用引導程序中的這些特定類名，或者是否確實需要這些類名？
我有一本非常出色的書，名為《 使用HTML5和CSS3進行響應式網頁設計》，但是我找不到關於電話或平板電腦特定類名的任何信息。
我只是在尋找有關為什么我的手機顯示與模擬顯示不同的答案。
謝謝。
<asp:Accordion ID="ProjAccordion" runat="server" FadeTransitions="True" TransitionDuration="100"
SuppressHeaderPostbacks="False" RequireOpenedPane="False" HeaderCssClass="ac-container"
HeaderSelectedCssClass="selac " SelectedIndex="-1" AutoSize="None"
ContentCssClass="ProjClass" BorderStyle="None" Width="100%">
<HeaderTemplate>
<asp:Label ID="ProjNameLabel" runat="server" onmouseover="rpthidn();"><%# DataBinder.Eval(Container.DataItem, "ProjectName")%></asp:Label>
<br />
<div class="ProjCostHeader">
<asp:Label ID="ProjCostHeader" runat="server" ></asp:Label>
</div>
<div class="ProjQuoteHeader">
<asp:Label ID="ProjQuoteHeader" runat="server"></asp:Label>
</div>
<div class="ProjHeadBreak"><br /><br /></div>
<div class="ProjAddCartButton">
<asp:LinkButton ID="AddCartButton" runat="server" ToolTip="Add Items to Cart" CommandName="Cart" CommandArgument='<%# Container.DataItemIndex %>'
CssClass="whitecross dkgray" ><i class="fa " aria-hidden="true"></i> ADD TO CART </asp:LinkButton>
</div>
<div class="ProjOpenCloseButton">
<asp:Label ID="ProjOpenButton" runat="server" CssClass="whitecross dkgray ProjOpenButton" >
<i class="fa " aria-hidden="true"></i> OPEN </asp:Label>
<asp:Label ID="ProjCloseButton" runat="server" CssClass="whitecross dkgray ProjCloseButton" >
<i class="fa " aria-hidden="true"></i> CLOSE </asp:Label>
</div>
<div class="CopyProjectButton">
<asp:LinkButton ID="CopyProjectButton" runat="server" ToolTip="Copy to New Project" CommandName="Copy" CommandArgument='<%# Container.DataItemIndex %>'
CssClass="whitecross dkgray" ><i class="fa " aria-hidden="true"></i> COPY </asp:LinkButton>
</div>
<div class="DelProjButton">
<asp:LinkButton ID="DelProjButton" runat="server" CommandName="Delete" CommandArgument='<%# Container.DataItemIndex %>' ToolTip="Delete Project"
OnClientClick="return confirm('Are you sure want to delete?')" CssClass="whitecross dkgray" > DELETE <i class="fa " aria-hidden="true"></i></asp:LinkButton>
</div>
</HeaderTemplate>
<ContentTemplate>
<asp:Panel ID="ProjHeadPanel" runat="server" BorderColor="Black" BorderStyle="Solid"
BorderWidth="0px" BackColor="#ffffff" DefaultButton="SaveProjectButton" CssClass="ProjHdPanel">
<br />
<br />
<div class="row">
<div class="Projnamediv">
<asp:Label ID="ProjnameLabel" runat="server" Text="Name:" Font-Bold="true"></asp:Label><br />
<asp:TextBox ID="ProjNameTextBox" runat="server" Text='<%# Eval("Projectname") %>'
ToolTip="Change the Project Name"></asp:TextBox>
</div>
<div class="Projnotesdiv">
<asp:Label ID="ProjNotesLabel" runat="server" Text="Notes:" Font-Bold="true"></asp:Label><br />
<asp:TextBox ID="ProjNotesTextBox" runat="server" Text='<%# Eval("ProjectNotes") %>'
Columns="54" ToolTip="Change the Project Notes" TextMode="SingleLine" ></asp:TextBox>
</div>
<div class="SaveProjbuttondiv">
<br />
<asp:LinkButton ID="SaveProjectButton" runat="server" CommandName="Save" CommandArgument='<%# Container.DataItemIndex %>'
ToolTip="Save Project Name and Notes" CssClass="whitecross dkgray SaveProjectButton"><i class="fa " aria-hidden="true"></i> Update </asp:LinkButton>
</div>
</div>
<div class="row">
<div class="large-1 columns"> </div>
<div class="large-10 columns">
<hr />
</div>
<div class="large-1 columns"> </div>
</div>
<div class="row ProjAddItemsRow">
<div class="NumberofItemsLabel">
<asp:Label ID="NumberofItemsLabel" runat="server" Font-Bold="true" ></asp:Label>
</div>
<asp:Panel ID="AddSKUPanel" runat="server" DefaultButton="AddNewItemButton" CssClass="AddSKUPanel">
<asp:Label ID="AddSKULabel" runat="server" Text="Add SKU:" Font-Bold="True" CssClass="AddSKULabel"></asp:Label>
<asp:TextBox ID="AddSKUTextBox" runat="server" Columns="9" ToolTip="Add Item to Project" CssClass="AddSKUTextBox"></asp:TextBox>
<span id="addskuspace" runat="server"> </span>
<div class="addnewitemdiv">
<asp:LinkButton ID="AddNewItemButton" CssClass="whitecross dkgray AddNewItemButton" runat="server"
CommandArgument='<%# Container.DataItemIndex %>' CommandName="AddNewItem"
ToolTip="Add Item to Project"><span aria-hidden="true"> Add To Project </span></asp:LinkButton>
</div>
</asp:Panel>
</div>
<％ -
<hr />
</div>--%>
</asp:Panel>
<asp:Panel ID="ItemPanel" runat="server" Width="100%">
<uc4:ProjectItem ID="ProjectItem" runat="server" projid='<%# Eval("ProjectID") %>'></uc4:ProjectItem>
</asp:Panel>
<asp:Panel ID="projnavheader" Style="position: relative; display: inline-block; width: 100%;" runat="server">
<div style="width: 100%;">
<div class="projlarge-4" style="margin-left: 30px;">
<asp:Label ID="ProjectIDLabel" runat="server" Style="display: none" Text='<%# Eval("ProjectID") %>'></asp:Label>
<asp:LinkButton ID="SaveAll" runat="server" CssClass="whitecross dkgray" CommandArgument='<%# Container.DataItemIndex %>'
CommandName="SaveAll" ToolTip="Save All"><i class="fa " aria-hidden="true"></i> Save Changes </asp:LinkButton>
</div>
<div class="ExportOptions projlarge-3-2">
<asp:Label ID="ExportOptions" runat="server" Text="Export Options:" Font-Bold="true"></asp:Label>
</div>
<div class="projlarge-4">
<asp:LinkButton ID="ExportButton" runat="server" CommandName="Export" CommandArgument='<%# Container.DataItemIndex %>'
ToolTip="Export Project to Excel" CssClass="whitecross dkgray"><i class="fa " aria-hidden="true"></i> Export to Excel </asp:LinkButton>
</div>
<div class="projlarge-4">
<asp:LinkButton ID="MaterialsRptButton" runat="server" CommandName="MaterialsReport" CommandArgument='<%# Container.DataItemIndex %>'
ToolTip="Materials Report" CssClass="whitecross dkgray"><i class="fa " aria-hidden="true"></i> Material Report </asp:LinkButton>
</div>
<div class="BidRptButton projlarge-2-2">
<asp:LinkButton ID="BidRptButton" runat="server" CommandName="BidReport" CommandArgument='<%# Container.DataItemIndex %>'
ToolTip="Bid Report" CssClass="whitecross dkgray"><i class="fa " aria-hidden="true"></i> Create Bid </asp:LinkButton>
</div>
</div>
<br /><br />
</asp:Panel>
</ContentTemplate>
</asp:Accordion>
CSS：
@media only screen and (max-width: 1180px) { .CopyProjectButton { display: inline-block; width: 14%; } .DelProjButton { width: 15%; } .projbuttonmargin { margin-left: 15px; } .ProjOpenCloseButton { display: inline-block; width: 14%; text-align: center; } } @media only screen and (max-width: 1166px) { .ac-container { height: 120px; } .selac { height: 120px; } .ProjAddCartButton { width: 18%; } .ProjCostHeader { width: 12%; margin-left: 20px; text-indent: 0px; } .ProjQuoteHeader { width: 12%; margin-left: 20px; text-indent: 0px; } } @media only screen and (max-width: 1132px) { .NumberofItemsLabel { margin-top: 5px; position: relative; width: 80%; float: left; text-indent: 20px; } .AddSKUPanel { position: relative; width: 100%; float: left; text-indent: 20px; } .AddNewItemButton { position: relative; text-align: center; float: left; } .addnewitemdiv { text-align: center; } .ProjAddItemsRow { width: 100%; } } @media only screen and (max-width: 1110px) { .projbuttonmargin { margin-left: 0px; } } @media only screen and (max-width: 1100px) { .projlarge-4 { position: relative; width: 22%; float: left; margin-left: 10px; } .projlarge-8 { position: relative; width: 50%; float: left; } .projlarge-3-2 { position: relative; width: 20%; float: left; } .projlarge-3 { position: relative; width: 20%; float: left; } .projitemdetails { width: 95%; } .projExtCostdiv { position: relative; width: 20%; float: left; } .projExtPricediv { position: relative; width: 22%; float: left; } .ProjAddCartButton { width: 20%; } } @media only screen and (max-width: 1020px) { .ProjAddCartButton { width: 25%; } .DelProjButton { width: 20%; } .CopyProjectButton { margin-left: 0px; width: 20%; } } @media only screen and (max-width: 940px) { .Projnamediv { position: relative; width: 44%; float: left; margin-left: 20px; } .Projnotesdiv { position: relative; width: 44%; float: left; margin-left: 10px; } .SaveProjbuttondiv { position: relative; width: 16.66667%; float: left; margin-left: 20px; } .projExtCostdiv { width: 15%; padding-left: 5px; padding-right: 5px; } .projExtPricediv { width: 19%; padding-left: 5px; padding-right: 5px; text-indent: 10px; } .projQuotediv { width: 15%; } } @media only screen and (max-width: 904px) { .AddSKULabel { width: 20%; float: left; margin-top: 5px; } .AddSKUPanel { position: relative; width: 100%; float: left; } .AddSKUTextBox { width: 60% !important; float: left; } .AddNewItemButton { position: relative; /*width: 35%;*/ float: left; align-content: center; } .addnewitemdiv { width: 80%; float: left; margin-left: 10px; } } @media only screen and (max-width: 886px) { .ac-container { height: 170px; } .selac { height: 170px; } .ProjCostHeader { position: relative; float: left; width: 40%; } .ProjQuoteHeader { position: relative; float: left; width: 40%; } .ProjAddCartButton { position: relative; float: left; width: 40%; } .ProjOpenCloseButton { position: relative; float: left; width: 20%; } .CopyProjectButton { position: relative; float: left; width: 20%; } .DelProjButton { position: relative; float: left; width: 20%; } .ProjHeadBreak { display: inline-block; } .projlarge-3 { width: 17%; } .projbuttonspace { width: 40%; } .projitembutton { width: 25%; } .projitemdeletebutton { width: 25%; } .projExtCostdiv { width: 17%; } } @media only screen and (max-width: 768px) { .wishlist .cartproductgrid .cartitemimg { width: 70px; border: 1px solid #ccc; } } @media only screen and (max-width: 600px) { .AddNewItemButton { position: relative; width: 45%; float: left; align-content: center; } .SaveProjbuttondiv { position: relative; width: 80%; float: left; margin-left: 20px; } .SaveProjectButton { margin-top: 5px; width: 45%; } .AddSKULabel { width: 30%; float: left; margin-top: 5px; } .projQuotediv { width: 17%; padding-left: 5px; } .projExtCostdiv { width: 15%; } .projMSRPdiv { padding-left: 5px; } .DelProjButton { position: relative; float: left; width: 25%; margin-top: 10px; text-align: left; } } @media only screen and (max-width: 510px) { .ac-container { height: 180px; /*margin-left: 45px;*/ text-indent: 15px; } .selac { height: 180px; /*margin-left: 45px;*/ text-indent: 15px; } .ProjAddCartButton { position: relative; float: left; width: 45%; } .CopyProjectButton { position: relative; float: left; width: 46%; margin-top: 10px; text-align: left; } .DelProjButton { position: relative; float: left; width: 40%; margin-top: 10px; text-align: left; } .projbuttonspace { width: 30%; } .projitembutton { width: 30%; } .projitemdeletebutton { width: 30%; } .projExtPricediv { width: 60%; margin-left: 15px; text-indent: 0px; } .projExtCostdiv { width: 17%; margin-right: 0px; margin-left: 5px; } .projqtydiv { width: 14%; } .projcostdiv { width: 15%; } } @media only screen and (max-width: 440px) { .AddNewItemButton { position: relative; width: 50%; float: left; align-content: center; } .addnewitemdiv { width: 100%; float: left; margin-left: 10px; } } @media only screen and (max-width: 430px) { .ac-container { height: 200px; /*margin-left: 45px;*/ text-indent: 15px; } .selac { height: 200px; /*margin-left: 45px;*/ text-indent: 15px; } .ProjAddCartButton { position: relative; float: left; width: 45%; } .ProjOpenCloseButton { display: inline-block; width: 40%; text-align: center; } .CopyProjectButton { position: relative; float: left; width: 40%; margin-top: 10px; text-align: left; } .DelProjButton { position: relative; float: left; width: 40%; margin-top: 10px; text-align: center; } .ProjHeadBreak { display: none; } .Projnamediv { width: 90%; } .Projnotesdiv { width: 90%; margin-left: 20px; } .projbuttonspace { width: 20%; } .projitembutton { width: 35%; } .projitemdeletebutton { width: 35%; } } @media only screen and (max-width: 400px) { .ProjAddCartButton { position: relative; float: left; width: 44%; } .ProjOpenCloseButton { display: inline-block; width: 45%; text-align: center; } .CopyProjectButton { position: relative; float: left; width: 45%; margin-top: 10px; text-align: left; } .DelProjButton { position: relative; float: left; width: 45%; margin-top: 10px; text-align: center; } } @media only screen and (max-width: 378px) { .ac-container { height: 225px; /*margin-left: 45px;*/ text-indent: 15px; } .selac { height: 225px; /*margin-left: 45px;*/ text-indent: 15px; } .NumberofItemsLabel { margin-top: 5px; position: relative; width: 100%; float: left; text-indent: 20px; } .AddSKUTextBox { width: 40% !important; float: left; } .AddSKULabel { width: 40%; float: left; margin-top: 5px; } .projitemdeletebutton { width: 40%; } .projQuotediv { width: 44%; margin-left: 15px; } .projExtPricediv { width: 40%; } } @media only screen and (max-width: 360px) { .ProjAddCartButton { position: relative; float: left; width: 45%; } .ProjOpenCloseButton { display: inline-block; width: 30%; text-align: center; } .CopyProjectButton { position: relative; float: left; width: 45%; margin-top: 10px; text-align: left; } .DelProjButton { position: relative; float: left; width: 35%; margin-top: 10px; text-align: center; } } @media only screen and (max-width: 347px) { .ac-container { height: 240px; /*margin-left: 45px;*/ text-indent: 15px; } .selac { height: 240px; /*margin-left: 45px;*/ text-indent: 15px; } .ProjAddCartButton { position: relative; float: left; width: 60%; } .ProjOpenCloseButton { display: inline-block; width: 60%; text-align: left; margin-top: 10px; } .CopyProjectButton { position: relative; float: left; width: 60%; margin-top: 10px; text-align: left; } .DelProjButton { position: relative; float: left; width: 60%; margin-top: 10px; text-align: left; } } @media only screen and (max-width: 330px) { .projbuttonspace { width: 1%; } .projitembutton { width: 44%; } .projitemdeletebutton { width: 44%; } .projcostdiv { width: 20%; } .projqtydiv { width: 20%; } .projQuotediv { width: 42%; } } @media only screen and (max-width: 322px) { .AddNewItemButton { position: relative; width: 70%; float: left; align-content: center; } } @media only screen and (max-width: 320px) { .ac-container { height: 300px; /*margin-left: 45px;*/ text-indent: 15px; } .selac { height: 300px; /*margin-left: 45px;*/ text-indent: 15px; } }
1 個解決方案
解決方案1
0 2017-03-24 15:46:58
需要注意的幾件事：
1）Bootstrap是一個響應式Web框架。 它不會改變在設備上呈現的規則，而是為您提供css，js和html代碼片段（組件），從而以可靠的方式快速實現網頁。 也就是說，電話不使用引導程序，創建可在各種設備上使用的網站的人使用引導程序來創建其網站。
2）雖然chrome和chrome for android是從相同的代碼開始的，但是隨着chrome和chrome的開發，創建者更改了應用程序的某些內容。 某些更改是出於安全原因，電池和電源，以及設備的接口和UCI不同。 由於這個原因，它碰碰運氣是否會起作用。 話雖這么說，但android chrome很好玩，因此我將在下面檢查原因。
使用引導程序（或其他Web框架）可能會解決您的問題，因為它已經在各種不同的設備上進行了測試。 如果您對使用當前網站感到無所適從（那沒什么問題），那么您可以下載android sdk並運行多個android設備的模擬器來測試您的Beta網站。
就您的問題而言，最好是包含一個jsfiddle，這樣我們就可以看到您在看什么，但是直截了當的反應是它與文本換行有關。 我將從css標簽display: inline和position: 。 未能通過檢查來查看您的任何代碼（css）是否需要前綴（我對此表示懷疑），或者您是否真的受夠了轉到Web框架。
Chrome瀏覽器（Android版）與帶有HTML選擇標記的桌面版的工作方式不同
[英]Chrome for Android works differently from Desktop version with HTML select tag
SpeechRecognition 在 Android/Mobile Chrome 上不起作用，但在桌面上起作用？
[英]SpeechRecognition does not work on Android/Mobile Chrome but does on Desktop?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
Android WebView顯示的網站與Chrome不同
Chrome瀏覽器（Android版）與帶有HTML選擇標記的桌面版的工作方式不同
Chrome檢查Android模擬器不起作用
Android模擬器中的Chrome瀏覽器
適用於Android和台式機的Chrome擴展程序？
SpeechRecognition 在 Android/Mobile Chrome 上不起作用，但在桌面上起作用？
在 Android 模擬器中安裝 Chrome for Android
Chrome和Android Chrome之間有什么區別？
android代碼在設備上的作用與模擬器不同
仿真器和 android 上的布局顯示與應有的不同
相關標簽