Real quick question here... I'm trying to style a public facing website. I've coded individual css files for the different browsers, but I've noticed that I've got some display issues when a user views the page from a mac OS... it's minor- just a footer background that's about 50 px too high, but it happens identically on FF and Chrome... both interpret correctly when viewed from Windows, but the same browsers from a Mac mess it up... this was one of the issues that initially got me to do differently tweaked...
Here's what I'm using for browser detection...
Dim browser As HttpBrowserCapabilities = Request.Browser
Dim bName As String = browser.Browser
If bName = "IE" Then...
Ok, So I'm thinking that the browser reports differently under these different circumstances, but there's only one mac in the company, and I'm having trouble finding a way to get what she sees to report to me, short of posting some kind of label... Does anyone know if there's a difference, and if so, what it is? what string I could look for so that I don't have to just throw mac users into an "else" category?
UPDATE
Well, I coded a little JS to give a popup for what the browser was reporting as... both FF and chrome reported correctly... so it seems that those OS's seem to interpret the CSS slightly differently, just like different browsers do? Does anyone know a trick for determining the OS a browser is coming from?
Related
So I’m drinking the Kool Aid and trying to create a responsive ASP.NET website using VS 2013 and Bootstrap, and I’ve hit a problem I don’t understand and don’t know how to deal with.
The site seems to be coming along pretty well, and all the Bootstrap stuff appears to be working properly when I view the site in a web browser and in the various Windows Phone emulators. The problem is that the site does not behave properly when I view it on my actual, physical, Windows Phone.
My phone is running Windows Phone 8.0, and the emulators claim to be emulating WP 8.1. I’m assuming that this would explain the difference in behavior, but I’m not sure and I don’t really know how to figure this out.
To simplify the problem, I created a blank ASP.NET Web Application in VS, and copied enough stuff from Site.Master into Site.Mobile.Master so as to create a Bootstrap navbar. I then uploaded the whole thing to Azure so as to be able to view it online.
Apparently I cannot post images up here nor can I post more than two links, so describing what's going on is a little bit of a challenge.
I’ve shared a folder on OneDrive that contains the two screen shots and Site.Master and Site.Mobile.Master from the project. I haven’t modified any other files. The folder’s address is http://1drv.ms/1lCW0TA .
In this folder, you'll see "Emulator Screen Shot.jpg" which is what the page I created looks like in the 8.1 emulator. You'll notice that the top navigation bar is pretty much what one would expect from a Bootstrap site.
You'll also see "Phone Screen Shot.jpg" which is what the same website looks like on my mobile device. Note that the top navigation is a mess.
If you want to look at it on your own device, the address is http://mobilemenus.azurewebsites.net.
So, my questions are,
1) What’s going on here? Is the browser in WP 8.0 not capable of rendering this stuff properly? Or am I doing something incorrectly that’s causing it not to work?
2) More importantly, how am I supposed to fix this? Given how simple this example is, I’m having a tough time believing I’m the only person in the world to be having this problem, but I can’t find any discussions of this issue online.
The website works fine on my Kindle. Unfortunately I don’t have an iPhone to test on, so I don’t know what it looks like on an actual iPhone.
I was hoping to finish this and get it deployed in the next couple of weeks, and it would sure be nice if it worked properly on existing Windows Phones.
Thanks in advance for any help.
-Rob
This looks like it is working exactly as it should. You are most likely using an emulator with a small screen resolution. The default emulator uses an 480x800 screen resolution. Your device has a resolution width of 768x1280 (value obtained from your screenshot. You can change bootstraps logic to not have a min/max width of 767/768 with some css. I've gone as far as just changing my local copy of bootstrap.css by doing a find/replace. You can also create a new css file that overrides certain values. You'll want to load that css file after the main bootstrap css.
A handy way to test screen resolution is with Chrome. Hit F12 to open the debugging tools and as you change the size of chrome, it will display the resolution of the page in the top right corner.
This is a well-known bug on Internet Explorer 10 for WIndows Phone 8.
Since you're using ASP.NET you have the chance to fix it server side once on your master page.
var style = new StringBuilder(
"<style type=\"text/css\">" +
"#-webkit-viewport{width:device-width}" +
"#-moz-viewport{width:device-width}" +
"#-ms-viewport{width:device-width}" +
"#-o-viewport{width:device-width}" +
"#viewport{width:device-width}");
var browserCapabilities = Page.Request.Browser;
if (String.Compare(browserCapabilities.Browser, "IEMobile", StringComparison.OrdinalIgnoreCase) == 0 &&
browserCapabilities.MajorVersion == 10 && browserCapabilities.MinorVersionString == "0")
style.Append("#-ms-viewport{width:auto!important}");
style.Append("</style>");
var placeholder = new Literal {Text = style.ToString()};
Page.Header.Controls.Add(placeholder)
Here's the whole article to fix the windows phone bug.
I am studying CSS3 and HTML5 and trying to develop a simple homepage. Since I have only Mac interface in my house so I couldn't check any differences on windows.
But one day, one of my acquaintances told me that there is a pixel difference between browsers which I didn't know at all. Then I checked my page and it appeared to be wrong.
Even though it was same resolution as I set, Chrome on Mac showed me an appropriate position of several buttons but Chrome on Windows didn't.
Their position was quite different and ruined the design. How can I fix this problem? or is it normal?
Thanks.
Developing a site that is the same on every combination of operating system and browser is no easy task. It has personally added many hours to my development time trying to fix the issues.
There are several tools out there that try to help you with this task, such as Cross Browser Testing. Or you can manually test it by installing the browsers on your machine. It is also common to use virtual machines to test your website on other platforms. VMware is popular.
Using cross browser libraries can also aid in this. Such as jQuery, which is very popular. This page lists more information on the subject, in general.
Difference is not in Chrome, but difference is in Mac and Windows.
Here, you can detect the userAgent and add the appropriate class to the body tag (with jQuery):
jQuery(document).ready(function(){
if(navigator.userAgent.indexOf('Mac') > 0){
jQuery('body').addClass('mac-os');
} else {
jQuery("body").addClass("pc");
}
});
After detecting userAgent, you can write css specially for Mac and Window and their browsers too.
In 2018 chrome and firefox behave differently depending on the operating system. I built a site recently, and on latest chrome and firefox versions one page was rendering OK in windows, while on macOS and ubuntu, it had a small glitch. The elements that are supposed to be inline were displaying horizontally in certain states.
This may sound like a SuperUser issue, but I wrote the page in question and I'm wondering if there is something I can do to fix the problem....
I have a page in production that simlply displays data in a bunch of tables. Our employees basically go to this page to print a form with our clients information filled in for them. Today for a specific client the page is not printing. I've tried printing using IE 7 and 8 as well as Chrome on Windows XP and Windows 7. This client's data is by no means make the page longer or contain more data that others clients.
Symptoms:
Does NOT print using IE8 or IE7 on WinXP and Windows 7.
DOES print with Chrome.
The page to print is displayed fine as a far as the actual web page goes... it scrolls, there are no errors and and nothing seems to be wrong with the page.
When using IE to print, the document just spools with out actually printing out...I end up canceling the document from the printers window.
When viewing print preview the first page is displayed, but when we try to go to the second page in the print preview IE locks up.
This does not happen for every client, but when it does happen it can be reproduced.
The page is pretty long and has client info that is keeping me from just copy and pasting the markup for you guys. I am hopeing that some one else has experienced a similiar issue in IE and has some advice.
NOTE: The users are not allowed to use other browsers, so save the IE flamming please.
Hmmm, very hard to tell without markup.
Just to throw some ideas:
Are you using anything difficult on the pages, like Flash or Java?
Custom fonts / cufon?
Huge downscaled images?
opacity or IE specific crazy filter CSS rules?
A huge structure that IE doesn't manage to break up into pages, e.g. a giant table with position: absolute ?
If you use images, try turning off the images. Try turning off CSS.
A few things to try when debugging:
Switch everything over to a standard font and font size (e.g. Arial 12px).
Eliminate all CSS and JavaScript, and if that fixes it then you can narrow down from there by taking out chunk by chunk until it starts working.
If that doesn't work, try cutting down the content significantly to see if it will show up.
Recently I had some issues with Flash in IE, involving a SWF which is something like a gallery.
In Firefox its loads perfectly, but in IE it doesn't work properly sometimes. The first time it is loaded its works fine but when I refresh all the images are blank. The image data came from XML.
I wish to get some tips regarding the browsers and Flash / SWF behavior in each.
Thanks in advance.
I once faced a similar problem. IE first displays image properly. Upon refresh it didn't display the image. The problem was with the IE security settings on scripting languages. If the script fails to load properly on first time, IE blacklists the script and hence blocks it from running again. When u reset the security settings it will work. But you should still get into the bottomline of the issue and fix it.
Thanks,
Nirmal
I am trying to determine what kind of interface to show to a user. If a user is visiting my site with a touch screen phone, I want to show them one interface, otherwise, I want to show them another.
Does anyone know of a list of UserAgent string values so I can do this check? I know I can check for the iPhone using the following code in ASP.NET:
Request.UserAgent.IndexOf("iPhone", StringComparison.OrdinalIgnoreCase)
However, I would really like to find a list for other similar phones like
Palm Pre
Blackberry Thunder
etc.
The Mobile Device Browser File might be of some help. Example: http://www.hanselman.com/blog/MixMobileWebSitesWithASPNETMVCAndTheMobileBrowserDefinitionFile.aspx
I prefer WURFL, it is most up date database. And you can use .NET API Marg.Wurfl.
As far as i know at present,there are 147 different webphone browsers if you count versions as being different and 2438 makes/models (Samsung has about 180).
Having just a list i think is useless as there are android phones that do not report that name in the userAgent string; which implies that maybe nothing else is useful with that string.
Instead,use a set of simple PC-based browser tests and let the failure be "by gollie i am going to treat this user as a webphone".
Safe to test any "standard" browser IE6 to IE9 (have not tested beyond that) or mozilla; at fall thru test for Safari, Chrome or Opera. Treat those last 3 as webphone, and fail of those tests, treat user as a webphone.
Even IE5 acts fairly decently on moer "modern" web pages!
So one set of pages for standard, and another for limited, junkie (Safari and Opera are in both classes), or extremely variable webphones.
The lowest, junkiest webphone i have seen is the TracFone LG800G; rather limited memory and worse, limited page size.
Do not ask what those limits are as nobody is talking,but they are small compared to anything else.