Im trying to implement a mini browser in adobe air. The browser should work in the same ways as a mobile phone browser, i.e. fit the width of the website to a certain width(specified within the html component) and leave the height to be scrollable.
I have managed to do a mini browser by using the scaleX,scaleY properties of the mx:HTML component however these make the websites look unreadable.
I have also tried setting the css3 zoom property, and that works fine, but it only zooms out certain elements, therefore messing up the site layout.
My question is: Is there a way to make a mini web browser which shows the full content of the website?
Thanks for your help
Air browser cannot be scaled without have an horrible look (no anti-aliasing).
A few years later but here is what I ended up doing:
The requirement was to show the full website that person B was looking at so that person A could guide them through the site. Due to all the limitations of the Adobe AIR Browser we ended up using IECapt (http://iecapt.sourceforge.net/) within an external process to capture the screenshot and send it back to AIR.
This is all well and good, but IECapt is quite out of date as well so recently we have started to look at the using Chromium (http://www.magpcss.net/cef_downloads/) as an ANE within our application and with that we can alter the zoom and dimensions of the page while still being able to keep it up-to-date.
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 creating a mobile site, now my problem is the images are getting render when i run the site on PC, and also while running the site on IPhone, but when it comes to Opera Browser for any symbian based mobile, the images are not at all rendering..
i am using asp:Image control on the site.. is this causing it not to be displayed on mobile.
if yes, then whats the equivalent for the mobile control. and also i want to resize the image as per the aspect ratio almost all the images are big in dimension.
Please anyone have any idea for the same, i will appreciate it.
If you wish to have your pages and images resize automatically based on the size of the device on which they are being viewed, you might find an answer with Zurb Foundation. I use it in almost all of my web "responsive web design" projects now.
http://foundation.zurb.com/
I am developing website and it has to be viewed in tablet pc. Please suggest me what are things to be considered ? technology wise ?
also i need to know what are the tools i need to have to view in my intranet as well as.
A major issue: in many tablets there is no moving pointer - at least not in a fully usable form. That means that tooltips may not really work, and image maps must be really clear, since there is no highlighting until the user actually "clicks" on the link.
Well, actually that's not fully accurate - if the user drags the pointer, it should work like a regular mouse pointer. The problem is that most users avoid dragging and just tap where they want to click directly.
Best piece of advice I can offer: get an actual tablet PC and try browsing your site. Most major issues will be evident almost immediately. If you are able, get a regular tablet/pad user to beta-test your site without trying it out on a desktop PC - they would be able to see issues that you would miss due to your prior knowledge of the site.
The Tablet PC is a standard Windows machine, therefore it has the same browser support as any other Windows box. So there isn't any special technology required.
There are however some design considerations:
First, make sure your layout has plenty of empty space surrounding iterative elements. Crammed pages are tough to navigate with a stylus, and if it is one of the newer models that also support touch it is even more of an issue.
Second, most Tablet PCs are configured with the default font size set for 125%. You want to make sure that your web pages scale correctly and don't end up requiring horizontal scrolling to see the full width of the page.
A second point regarding scaling, Tablet PC supports both Landscape and Portrait modes. In other words, it can be 1024x768 OR 768x1024. You'll want to make sure that your user experience is acceptable in both modes.
One thing i can think of : there is no 'hover' on most tablets, and if it's there at all, likely nobody will see it.
Not all tablets support flash, but they do all support javascript, and Prototype.JS or jQuery will run on them in most cases
Back in the past,
i found a third party webpage that was able to capture and save images of my website in different resolutions and browsers. Of course i have no more that bookmark...
So is there any webpage or application where i can see how my webpage looks like in different resolution?
And here are the resolutions i would like to check for..
1. 1024x768 24.56%
2. 1280x800 22.06%
3. 1280x1024 13.42%
4. 1366x768 7.10%
5. 1440x900 6.68%
Perhaps you're thinking of http://browsershots.org/ ?
Note that the screen resolution of the computer running the browser is only half of the truth. If the browser isn't maximized, it will be a lot smaller than the resolution you see there, and on non-Windows operating systems (Mac OS X, Linux) it's a lot more common to run applications non maximized.
It's simply best to make sure that your site is viewable in anything from small windows (just resize your browser down) to large.
If you want to check various resolutions and browsers, then BrowserShots may have been what you came across before, give it a look.
For viewing which percentage of people sees how much of your web page:
http://browsersize.googlelabs.com/
Also: Web Developer plugin for Firefox (Resize menu).
Chrome Extension and Firefox add-on to resize your browser to various standard resolution sizes...
There is one more online tool called ScreenFly which is very good and you can even check for tablets, TVs, mobiles.. screenfly
There are many utils available for watching your website in different resolutions.
Some are installed on PC, some are online services like these:
Adobes "render browser" - you'll need to create a free Adobe account:
http://browserlab.adobe.com
Nice, but not free if you want it fast as I recall it:
http://browsershots.org/
Google - shows what part of your website is visible based on statistics from Google:
http://browsersize.googlelabs.com/
But as far as I know, todays most commonly design resolution is 1024x768, eventhough the height isnt that important because of the popular scrollwheel on most mice/pads.
If you design to design for this resolution there is a lot of design help in the "growing standard" called 960 grid, which is based upon how many professional designers build a design.
You always make an invisible "grid" and then you use the cells to arrange the contents. Much like the old "table" system, but much more focused on professional designs.
Regarding your question, the % you list, seems like you would have most use of the "Google" link above.
Lastly, always remember to test how your website looks with the most used browsers. For me those 4 will be:
Internet Explorer (latest and previous version, use more than one computer to test if you cant do a double installation of it)
Mozilla Firefox (latest and perhaps previous.. but they make less changes in the render, so latest would be ok)
Google Chrome (awesome debugging tools too, and a very stable browser)
Safari (so you make sure that you support MacOSX)
Thats my opinion.
The Multibrowserviewer is a great (paid for) tool for multi browser support, I know it's not free, bt worth looking into even just for the trial period.
I have a modified version of a flex calendar found Here, and though it looks alright on most computers I've seen, there is a problem on two of the three servers here. Because of the way Citrix is setup here, I need to have it functional on all of the servers.
When it loads, everything is stretched out vertically, and the numbers are missing on the date boxes. If you mouse-over the flex buttons, they jump to the right size, but there is still rendering errors.
The modifications I made had no effect, because the servers give the same results on both my version and the demo version hosted online. As far as I can tell, the servers are identical (IE version, Flash version, etc.)
How can I get it to display normally?
Initial View
After Mouseover
Usual Demo
Demo in bad server
Edit: On the server that renders it improperly, Firefox renders it fine, but Firefox cannot be used for other (unchangeable) reasons.
From the images it appears this is how the SWF appears in the Browser of each server - one good and one bad. Not how the SWF appears in any browser while being hosted from each server.
Sense it is the browser display that is not working correctly I would assume it is a rendering problem with the browser and not the server.
1.) The problem could come from JavaScript being disabled in one of the browsers and the view being taken from the embed tag. Check to ensure that it looks the same with JavaScript both on and off.
2.) The height being 100% could also be messing it up in the browser. Try setting the height to a specific value (800px) and see if that corrects the problem.
3.) Make sure that the browsers are the same. Is one IE 7 and one IE 8? If they are the same, check the version number to ensure that all updates are the same for each.
4.) View the site from another computer that is connected to the server.
Number 1 and 2 would be my best guess as a way to troubleshoot.