I am trying to create a page which accepts URL of the website and shows me all the display sizes horizontally.
something like this : http://dfcb.github.com/Responsivator/
or
something like this : http://mattkersley.com/responsive/
In both the websites they are using iframes to load content in the specified width and then they are playing with width and height for different devices, it works well in all browsers apart from IE7 and IE8 I am wondering how to make it work on IE 7 and 8. There should be some way or other.
I read somewhere that http://www.ehow.com/how_8123203_use-iframes-ie8.html you can use P3P headers but I am not sure.
language is not an issue. but I just want it to be working on every browser.
I have developed a test page and kept it online : http://sentimentanalysis.comeze.com/responsiate/
if you see closely it works fine on chrome, ff, IE 9 but works pretty weird on IE7 and 8, how to make it look same? Is it possible?
Any pointers would be helpful.
Responsive design doesn't work in IE7 and 8.
Using methods like:
#media only screen and (max-width: 768px){}
do not working in IE7 or IE8, the only way around this is the client side Chrome frame.
Mobile headers (not responsive media queries)
You can send pretend mobile headers but that's about it. This would require a lot of messing about to fool the server into thinking you are on a mobile device, but it will take a lot of doing. Your server will have to request the page and all of it's assets (images, styles and scripts) and it won't show the true responsive design of the site: only the full mobile site if the target has one.
Related
I am doing a web application. While trying to open the webiste on UC mini browser in data saving mode from my mobile device the css styles are not getting compiled.Is there any way to debug?
Thanks in advance.
There are no very good ways to debug it. UCMini (or UCWeb in light speed mode) is a remote proxy browser. As far I know, there is no debug console for it. The only thing you can do is throw JavaScript alert()s to try and debug various JS breakage issues.
But if you are concerned about a very weird layout. Keep in mind that you will never see a normal CSS in those modes. UCMini is not a normal browser. It's a Firefox 10 proxy engine that will shrink your content into a single column, in a similar way Opera Mini does in single column view mode.
A couple good other helpful things to know about that browser's context:
The target screen size is 800x600. So in portrait, it shrinks it all to approximately 600px (in one column), and 800px in landscape. And due to the Firefox 3-10(ish) engine, CSS support is limited.
I could say about our experience (FareCompare.com). Nodejs consoles + Frontend (Dojo) alerts. That's all we could find for our few bugs.
P.S. Pay attention that UC is working in one page mode. As far as I know, it is impossible to open new tab there. window.open() works the same as location.replace( url ).
I just implented a responsive design for www.star-registration.com.
It seems to work fine on most of the browsers but on some the startpage www.star-registration.com isn't working but www.star-registration.com/order/ and all other pages work fine.
The problem occurs when I use firefox and resize the browser. I quess it's because of the Javascript files http://www.star-registration.com/skin/frontend/default/sterntaufeeUSA/js/responsive_slider/responsive_slider.js and http://www.star-registration.com/skin/frontend/default/sterntaufeeUSA/js/jquery.slicknav.js
any suggestions why the startpage isn't getting displayed properly?
It is indeed because you use JS. The JS checks the width of the screen only once (as far as I see at least), so when the page loads it aplies the different styles, but not when resizing.
I would suggest CSS Media Queries instead.
Check the W3Schools Instructions
That's basically it. Somehow, the javascript in Google Docs can turn off the default headers and footers showing the URL, date, page numbering, etc.
This only works in Google Chrome. When Google Docs is running from another browser it will print the headers/footers unless removed manually through the print configuration dialog. In Safari, it seems to generate a PDF server-side which of course will print outside of the browser.
I've searched around the web and have found nothing on how this is done. The javascript in the page is of course minified and obfuscated so it's difficult to get any insights from there.
So before I'm forced to dive into that spaghetti, I'd like to know if anybody has any ideas of how this is done.
After delving into some source code I found on a web page that has also resolved the issue (not Google Docs), the secret is the following CSS:
#page
{
margin:0;
}
This only works on Chrome, and perhaps Opera though I have to verify if the latter is true as it's printing the background color by default while chrome prints with a white background and the colored background in my page might be just obscuring the header/footer text.
Other browsers give differing results:
Firefox and Safari ignore the margins apparently and print the headers/footers anyway.
IE9 makes a mess of things and the contents print overlapped with the header/footer text. Poor browser always gets all the heat...
In conclusion, combining this with silent printing coming out in Chrome 18 kiosk mode will make for some interesting functionality, such as mail merge capabilities right from the browser though I still have to research how secure kiosk mode is though, as navigating to a malicious page runs the risk of exhausting printer ink and paper.
Navigation should be restricted to a URL white-list in this case.
When I'm testing my website on a normal notebook, I have no problem with my website but when I'm testing this website on a Netbook (mini laptop) it has a strange behaviour.
You can see the website here:
http://www.benskesblog.com/projects/frontend/project/index.htm
(it works on IE9 and other modern browsers).
When I try it on my netbook the images aren't displayed completely. When I scroll I see another part of the images. Very strang. I've tested it on another netbook (and on other browsers) and I have the same problem. You can see it here:
http://img259.imageshack.us/img259/5168/titel1.jpg
http://img683.imageshack.us/img683/374/titel2k.jpg
Does someone now what's going on?
Thanks!
For starters, IE9 isn't "modern" - it's "bleeding edge".
Also, your page doesn't work at all in IE6 - which is arguably the most common browser out there.
So you've really got two questions you need to ask:
1) What is the minimum browser I'll support (for example, IE9+FF7+Safari5 #1024x768 truecolor resolution)?
2) How will I degrade gracefully for users who don't support my minimum requirements?
The pages in question contain a lot of javascript and CSS. How well are these supported by mobile platforms generally?
Is there a browser emulator (or equivalent tool) to assist testing?
Opera has an option to view pages as through a mobile device. I've found it useful in the past.
I can tell you that Apple's Mobile Safari on the iPhone renders Stack Overflow perfectly, which I find rather amazing.
This is a site for programmers, not average users, so we accepted a lot of JavaScript dependencies.
I do wish more mobile devices had browsers as powerful as Mobile Safari. I hear good things about Opera Mini as well.
One example:
The standard BlackBerry browser on my BlackBerry 8130 (Pearl) seems to ignore both CSS and JavaScript when loading my home page.
I also installed Opera Mobile on this device, which renders the CSS but not my jQuery hover effects. It does understand some jQuery - for example, I have a form validation that does a show() of error messages if validation fails. That works in Opera, although without the animation effect.
The safest thing to do for mobile browsers is to design pages that degrade gracefully without JS or CSS. It's up to you whether that's worth the effort or not.
In a few years, hopefully the only rendering differences will be the screen size limits of the phones.
You can install Opera Mini on an emulator like the Java WTK and test mobile rendering on a PC. One drawback is that Opera Mini still works through a proxy, so debugging local files/sites won't work - you have to upload your site to a world-accessible server.
Just google it.
It depends entirely on the phone. If you want to support every single device out there, don't even bother with CSS or JavaScript since neither will work (or will do something completely non-standard) on 99% of devices. If you are only targeting high-end devices, like the iPhone or the latest Series 60 Nokias, you should be able to get away with limited JS and CSS.
Some browser emulators that I know of:
Openwave.
Nokia tools
There are many more manufacturers that simply do not have any tools at all (I dare you to try and find a developer site for LG) so you need to get access to the physical handsets if you want to be sure the site appears as it should.
DeviceAnywhere is a superb tool if you have the cash. It was extremely laggy the last time I used it about a year and a half ago. Plus it is pure Java so is a dog on any machine. But it is arguably the single best mobile development tool available and, believe you me, I've tried a lot.
BlackBerry devices with OS 4.5 or older will not handle Javascript or CSS very well, if at all. Devices with OS 4.6 and higher (Bold, Pearl Flip, Storm, etc..) come with a new rendering engine which has much better support for Javascript, DOM, and CSS. It's not perfect but it should render most pages quite well. You can download the BlackBerry simulator for these devices from their developer website and try it out. Since it runs the same code as on the actual device it's an excellent representation of what you can expect to see on-device.