Does Chrome on an android phone behave differently than on the desktop Chrome emulator?
Question
Specifically, I am trying to convert our website from a desktop model to a responsive website using media queries and css width parameters based on percentages rather than fixed pixels.
Everything looks fine when I use Inspect and change the window width with the Responsive tool at the top of the page. However, when I pull up our Beta test site on my Android phone, one of the Link Buttons which is coded with Font Awesome is split between two lines.
<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>
I spoke with someone who told me that phones use Bootstrap which is based on divs with classes named row, large-12 columns to define a width of 100% across a screen.
I have found the website for bootstrap but I was wondering if someone could provide a link for how phones and tablets use these specific class names from bootstrap or is it not true that these class names are required?
I have an excellent book titled Responsive Web Design with HTML5 and CSS3 but I could not find anything about phone or tablet specific class names.
I am just looking for answers as to why my phone displays differently from the emulation.
Thank you.
<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 answers
solution1
0 2017-03-24 15:46:58
A couple things to note:
1) Bootstrap is a responsive web framework. It doesn't change the rules of rendering on devices, it gives you css, js, and html code snippets (components) to quickly implement a webpage in a reliable way. This is to say, phones don't use bootstrap, people making websites that can be used on all sorts of devices use bootstrap to make their websites.
2) While chrome and chrome for android started from the same code, as each was developed the creators changed certain things about the application. Certain changes were for security reasons, battery and power, and because the interface and UCI of the devices are different. For this reason its hit and miss whether something will work or not. That being said android chrome is pretty good about playing nice, so I would check the reasons I gave below.
Using bootstrap (or another web framework) may solve your problems because it has been tested on a variety of different devices. If you are dead set on using your current website (nothing wrong with that), then you can download the android sdk and run emulators of multiple android devices to test your beta site.
In terms of your question, it would be best if you included a jsfiddle so we can see what your looking at, but gut reaction is it has something to do with the text wrapping. I would start with the css tags display: inline and position: . Failing that check to see if any of your code (css) needs prefixes (I doubt it), or if your really fed up go to a web framework.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Android WebView Shows Site Differently Than Chrome
Chrome for Android works differently from Desktop version with HTML select tag
Chrome inspect android emulator does not work
Chrome Browser in Android Emulator
Chrome Extension for Android and Desktop?
SpeechRecognition does not work on Android/Mobile Chrome but does on Desktop?
Install Chrome for Android in Android emulator
What are differences between Chrome on Android and Desktop Chrome?
android code acting differently on device than emulator
Layout displays differently on emulator and android than it should
Related Tags