[英]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)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框架。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.