So I was messing with my Wii U's web browser and found their cool little developer tools feature. I enabled it and loaded up my website.
While inspecting it, I found something weird - the website's body displays as 980 pixels wide, even though the gamepad is only 854 pixels wide according to Wikipedia.
If it matters, here's a link to my site, but I'm pretty sure it's not my code that's doing this. Any ideas?
The viewport of the browser is 980 pixels wide. This is most often seen on mobile browsers, where emulating desktop dimensions would be troublesome; not sure why they would feel the need to do the same in this situation. Perhaps they ported an existing mobile browser? You can control this behaviour by using the <meta> element on your website.
Related
It just so happens that on iOS 10.3 Safari (and may be even older versions too) the web pages bounce when scrolling ends. I do not want that fancy bouncing on my own website and the ones I visit. Much prefer just the standard scrolling behavior!
Is there a standard "non-hacky" way, i.e. without using javascript's event.preventDefault(), to stop Safari from doing this? Unable to find anything related to this on Apple's documentation site that works.
It seems every resource regarding things like CSS3 and HTML5 nag me about particular things not being implemented in older browsers, and hacky workarounds. Really who uses IE 9 or 10 anymore anyway? IE11 is out, Edge is default on W10, and I assume most / all people use it. To me it seems to make the most sense to simply make the page render properly on the latest Chrome (what I use), Firefox, Edge, and Safari..
Ughhh apple. My understanding is that the Windows version of Safari is very outdated and trying to get a (questionably obtained) image of macOS working in a VM has been unsuccessful. I'm not spending a dime for any Apple products just to test my site on their browser. So what can I do in order to test how my site will work in it?
Regarding your question...
Who uses IE 9 or 10 anymore anyway?
Typically, people with older Windows systems. This is important for your website based on whether or not IE 9/10 users will be accessing the website that is being supported. (A review of your website's web logs can shed light on this.) If your website is an internal intranet site, then an organization's IT department may dictate the browsers that users can use. However, large eCommerce websites will often support older browsers out of fear of losing customers to rivals.
Regarding your second question...
How do I go about ensuring the site is functional and looks reasonably
good on apple products conveniently, without any apple products while
on a minimal budget?
Without actual Apple products, something that emulates these displays is needed. One option is the "Inspect" option with the Chrome browser. (Display your website on Chrome, right-click, select "Inspect".) Inspect allows you to choose between a Desktop or Mobile display. With a Mobile display, you also have the option of selecting several Apple displays (e.g. iPhone, iPad, etc.). This is probably the next best thing to having the actual Apple device and its display for website testing.
For my responsive site I need to support IE9 meaning that I cant use felxbox yet. However ive got a breakpoint at 500px targeting phones. Is it safe to use flexbox within this media query? The mobile browser support seems good.
This is a new site so I dont have any existing analytics data to make this decision with.
It's safe to use Flexbox at any breakpoint with supported browsers, as long as you use all the necessary old prefixes, please do. Android & iPhone browsers that don't support flexBox are essentially dead.*
*Except that Opera Mini doesn't (quite yet) have FlexBox support in 2014, and is used by 250 million users, which is a higher market share than IE9 on older Windows Phones 7. Probably a dying breed at this point, IE 9 Mobile now only account for 0.29% of the mobile market. However having a table fallback solution to a Flexbox layout is still rather important, especially if your site cater to the Asian or African continents or Eastern Europe for Opera Mini, or if still need to target IE8 or IE9 users.
Know that technically you can use Flexbox with a IE8-9 compatibility fallback using table + table cel/row. It depends on your context, and as to which Flexbox features are being used... If you don't use flexWrap nor reordering, a table fallback should work reasonably well on IE8-9, even on mobile.
Here is an example production site I did using flexBox + table fallbacks, working in IE8+, Opera 11 and Opera Mini (Presto). Opera Mini gives a rather crappy layout, but at least it's mobile compatible.
Update: Opera Mini servers now support Flexbox at Opera Presto 2.12 levels which is unprefixed.
Not perfectly safe, no. There are some situations where a desktop or notebook browser might be smaller than 500px wide.
One suggestion could be to use IE conditional statement to include the appropriate CSS, but this approach might fail in IE10 as IE conditional include support is removed.
The safest bet is to use feature detection library like moderniser and then write your css accordingly.
If IE9 and mobile browser class is added to the body by moderniser you can write your media query accordingly to apply felxbox styles only when the browser is not IE desktop and have fallback css acoordingly
I am developing a responsive website. For each and every change I made in javascript, css & html file, I need to test it in all possible screen size in portrait and landscape mode. Normally we used to test it in 3 to 5 different browser window size, and in portrait & landscape. I felt changing screensize and orientation again and again is a tedious job. So planned to write a tool, which will open multiple browser windows in a different screen size with the given url loaded in it. Any idea, or advice how to start this?
PS. If you are voting for deleting this question, please consider commenting with some suggestion how I can start, or is there any free tool available for this.
Thanks in advance.
There are number of great tools and services for helping test a website in just about every possible OS/browser/size these days.
BrowserStack.com allows you to pull up your website on nearly every combination of OS/browser/size and use the site to see how elements and features perform. There are other many other services that do this.
Another option would be a browser extension/plugin like Chrome's Window Resizer. It allows you to quickly toggle between common (and custom) window sizes. This is the most manual of the three options here, and the only free option.
One final option is Adobe's Edge Inspect. This app allows you to connect several devices to your computer and simultaneously browse a site across each of the devices. It also allows you to remote inspection on each of the connected devices.
Tools like Selenium can drive browsers and resize them as needed. Depending on the language of your choice, google for something like: selenium resize browser (language of your choice)
I use the webbrowser control to display a webpage from an application, but it just displayed a white screen. I tried Internet Explorer and it did not display anything either.
Any ideas how to fix this problem.
Thanks a lot in advance.
Windows Phone Emulator requires a DirectX 10 or above capable graphics card with a WDDM 1.1 driver. I assume that you got an error message on first start of the emulator that your graphic adapter isn't capable for all functions the emulator is using and that this may impact XNA games and sometimes silverlight like this one:
If your graphic adapter does not fully support DirectX 10 or doesn't has a WDDM 1.1 driver you will only see a white screen instead of the rendered webpage. This also affects all controls using MultiScaleImage, including the webbrowser control. As far as I know there is no solution for this at the moment.
To check if the emulator is running the required GPU emulation take a look at the arrow to open the application list and if it points to the right or left. If it points to the left, NO GPU is available - if it points to the right (as on the hardware phone itself) the GPU is available and rendering should work as expected.
See also this page in the msdn.
You haven't said if you're testing a local/private page or one on the web.
Also test other pages on the web. Can you view anything or just your own page.
If you can't see pages on the public web then you have a networking issue
If you can see public pages but not locally hosted ones then you probably have a different networking issue. If you're on an actual device or the emulator will likely greatly affect this.
The other things it may are:
you're trying to view a page that is to compilcated to be displayed (if there is such a thing - test with a very simple static page first)
the page uses useragent detecction and doesn't recognise the user agent and so is serving nothing
the page has complex javascript which runs before the page is rendered and the javascript is failing and so the page is never displayed.