It is either broken, or I don't really fully understand it. I have a Lumia 625 which has a 480x800 resolution. This is a screenshot from the Chrome Emulator with device set to 'Responsive' and res to 480x800:
I did attempt multiple refreshes, as I know it's sometimes bugged if not refreshed, however still the same result. Then I exited the emulator, and manually resized my browser window to 480x800 (Chrome shows the widthxheight when you resize) and it looks like this:
And finally, commited and published my website and tried it on my phone:
Now I have to say it's not pure HTML&CSS as I do use jQuery to style my page, but this really bugs me, as it seems to show very inconsistent results. How can I make sure the result I see is the one I'll see on the actual device? Also, if this is a known problem, I'd be very thankful to know if there's any other good emulator for mobiles/tablets out there? I really do love Chrome, but this emulator thing is just not doing it for me. :/
Related
My last question was closed for some reasons (Chrome Inspector not even 1% accurate to real mobile devices)
However as it seems the problem was related to the DPR. I will attach images to show my problem
Chrome/Firefox Inspector with DPR 2.0 for Iphone 6/7/8:
Real Iphone 6:
I can not simulate the DPR on any website on any browser on my pc or my friends pc. It will always scale like 1. Doesnt matter if I use DPR 1,2 or 3.
So my questions is how to successfully simulate DPR 2.0?
I guess the problem is DPR or is it something else?
First of all the bigger text was my bad, my iphone got bigger text set that was the reason why the text was different. However the core of this topic is still the same and the resolution is different to chrome inspector and real devices. However mostly because of the browser taskbars.
As it seems no browser related inspector solution is working. However even when some people said it is not possible to emulate real devices it´s actually possible and also by google itself with android studio:
https://developer.android.com/studio
You can use any android version and create any resolution you want. You can also test localhost from your host os inside of your emulated smartphone browser by using this instead of the default localhost/127.0.0.1:
10.0.2.2
You can also open inspector of your emulated device from your main os! By using:
chrome://inspect/#devices
And here is starting the real question. Why does this inspector window clone the correct device resolution from the emulated device? I mean it´s literally the default chrome inspector window again. Very confusing.
They even clone the menubar, even when it´s now showing, the resolution and everything else was cloned 1to1 compared to the android studio emulator.
However I guess it´s more realtime streaming than actually cloning.
That´s to the point it´s not possible..
Also maybe very nice to know that you can use the fullscreen API to dodge problems with those annoying browser taskbars which crash your ui and take space. You can use this code to enter fullscreen with user gesture:
<button id="goFS">Go fullscreen</button>
<script>
$("#goFS").on("click",function(){
// this works with scroll - do not use document.body.requestFullscreen();
const elem = document.documentElement;
if (elem.requestFullscreen) {elem.requestFullscreen()}
if(document.fullscreenElement){
console.log('fullscreen detected');
}
});
</script>
In fact it´s really sad that you have to download android developer software just to emulate real display solutions as web designer. I hope google will build in this technology in future inside of their chrome inspector.
Also I guess apple is providing the same software for their ios app development. So you should be able to emulate iphones their too. However as far as I read you must use a MAC machine for this.
Hope this will help anybody.
I have developed an app using HTML5 and CREATEJS. I am encountering some issues that I cannot find a solution, for weeks. I hope someone can help.
1)On Android Google Chrome there is a problem that appears when I simply click anywhere on the screen: the FPS drops and any animation that is playing freezes for the duration of my touch. The problem is only in Mobile Chrome browser, on Android. It does not exist in other mobile browsers, neither in iPhone, neither in Safari, Firefox, etc.
I created a simple apk using webview and it doesn't have the problem either. So for some reason, the problem is only in mobile android chrome.
The code is optimized at maximum. 2 months ago we used only 1 canvas, but now we use multiple canvases and we have less animations in each canvas running everytime. While in android firefox it works perfect, but in android chrome it freezes for a single click.
I tried to disable stagemousedown/up events, because they are being triggered when I simply click anywhere in the stage. This didn't fix the problem or it is possible that there are some hidden stagetouch events that I don't know how to disable.
2)On Android Google Chrome and iPhone6 Safari, when I click the SPIN button, the game starts the SPIN, but with a delay of at least 1.5 seconds, but there is no such delay added with intention inside the code. On PC any browser, Android/iOS Mobile Firefox, this works perfect, no delay. In iOS Safari iPhone8 again it works perfect.
I created a simple apk using webview and it doesn't have this problem either. So for some reason, the problem is only in mobile android chrome.
UPDATE 11/10/19: Issue 2 has been solved by reducing canvas size and removing all shadow effects which consumed a lot of memory. Issue 1 still remains unsolved with absolutely no ideas left to try out. Any help is appreciated.
My project is 99% completed except these 2 issues. I am hoping to be able to fix them, because I really do not want to throw away months of work and switch to other javascript library for gaming, that doesn't have the problem, like PIXIJS.
I tried with RAF and RAF_SYNCHED, but still no improvement in any scenario.
Stage.update() is required for any animation. Having them on ticker is the reason why its getting slower.
To see the problem in action, please open this URL: http://www.nevergone.biz/DEMO_CODE/index.html
How to test: Open the link above in Android Google Chrome portrait mode and then click SPIN. During SPIN click above the game canvas or anywhere. Notice that everything freezes.
The code was extracted only for testing these issues, so after a few spins it may freeze. I will fix this tomorrow, but I hope someone can give some ideas for solving the problem.
Problem #1 is apparently isolated on some older devices that use Android Google Chrome. The problem is somehow caused by CREATEJS using too many listeners on the stagedown event. I am currently waiting for the developer of the framework to give an answer or for Chrome to receive a serious update.
Problem #2 was fixed by removing all text-shadow CSS effects which apparently were consuming a lot of memory.
cache might work.
var testShape=new createjs.Shape();
testShape.graphics.beginFill("red").rect(0,0,100,100);
testShape.cache(0,0,100,100);
stage.addChild(testShape);
// If you make changes and want to refresh the cache
testShape.updateCache()
Ive made a simple project with html and jquery. It works great in all browsers except for safari on ipads. Since apple doesnt have a windows version of safari i cannot check if the error is explicitly for ipad but i think so.
The problem is the photoboxes wich get their width from the jquery, they dont appear at all on the ipad. Chromes developer tools device mode shows everything correctly and i have css queries that take care of smaller screens so its only the ipad thats the problem. I havent found any way to do a web debug on the ipad either. Its hard to give a code example due to i dont really know what the error is but i have a live demo you can check out. For you on ipads, its supposed to be photos before the winter background.
http://www.mj-bygg.se/ipad/default.aspx
I am also getting the same error on desktop Chrome on the first load. If I refresh, then the pictures load fine but on first visit to the link I only get the footer image (trees.)
On the first load, none of your jQuery heights/widths are being applied. No errors in the console and if I rerun the function it works as it should (without reloading the page.)
I suggest either pushing the script further down the page or using $(window).load(function() {}
instead of
$(document).ready(function() {}
That is the only thing I can assume is wrong if it fails first time but works with the page being cached.
I have a site that uses javascript to launch a css overlay of a google map (see [link deleted because I can only have one at a time] and click the 'Enlarge' button under the map).
This doesn't work on the ipad. I believe it has something to do with this not being a link, but using the jquery live('click',.. approach. I need to fix this but I'm new to using the ipad and I don't even know how to step through the javascript to see what the problem is.
What kind of development tools are available for testing on the ipad?
Edit: My mistake. The link above works fine in the iPad - no problem bringing up the larger map. However the sister site http://lowes-realty.com/Stateline-Plaza_Enfield_CT-11.aspx is not working. What I need is a development system that will let me look at them both on the ipad (I really want to avoid emulating or spoofing).
Have you tried firebug lite?
http://getfirebug.com/firebuglite#Install
Have you tested this in google chrome? As google chrome is a webkit browser, you may be able to do the majority of your debugging in chrome, and iron out smaller issues on the iPad itself.
Edit:
Removed unnecessary comment about iPad.
The problem ended up being that I had a javascript error that aborted the script before I ever got to the jQuery code. Once I fixed that, I was able to use jQuery without making any special modifications for the ipad - awesome! I did not have to do anything with the swipe or tap events (sweet!).
However I was not able to get any kind of javascript debugger; I had to work this one out for myself. As of Nov '09 firebug lite crashed the ipad for me and there don't seem to be any developer tools build for testing the ipad. I tried several sites that claimed to perform the same way the ipad does in your browser and not one of them held water.
I have no reason to believe that there is a good option for debugging a site on an ipad (yet).
Edit A Year Later... I'm still looking for a good way to develop on an iPad. I just got Adobe Shadow up and running - it's not actually a useful tool, but there is potential (http://tv.adobe.com/watch/adobe-technology-sneaks-2012/adobe-shadow). Right now (3-29-12) the code inspector is essentially non-functional (cannot view inherited styles, can't view elements without expanding the DOM from the body element, no javascript debugging, and much more).
I know that sounds hopeless, but it has one thing going for it that nothing else I'm aware of does: Shadow works with all existing mobile devices and its code inspector is independent of device and browser. So although the inspector sucks spectacularly right now, once they build some functionality into it Shadow could be a good solution. From their site:
Shadow will be updated regularly to stay ahead of web standards, web
browser updates and support for new mobile devices entering the
market, while incorporating user feedback to provide the best
functionality and experience possible.
~ http://labs.adobe.com/technologies/shadow/
I think the problem is that on the iPhone / iPad there are no clicks events generated but instead touch events (swipe, tap).
You can use something like jQTouch (you can start reading here Getting started and then proceed to callback events hint: tap==click).
If you have more to adapt you can also look at (and wait for a stable release) of jQuery Mobile
weinre lets you remotely attach a WebKit inspector (the built-in Dev Tools you use on desktop browsers) to a page running on your mobile device (iPad/iPhone/iPod/Android/BlackBerry 6/webOS) over WiFi.
http://phonegap.github.com/weinre/images/weinre-demo.jpg
JavaScript debugging is limited to console.logs, but it's better than nothing.
If you have an ICS device, Chrome Mobile lets you remotely attach a full-featured Inspector (with full JS debugging/breakpoints) over USB. I've been thoroughly thrilled using this tool with my Galaxy Nexus.
(source: google.com)
I am not interested in some program that I have to pay for, but I really need a way to debug my website in Internet Explorer.
The url is http://www.tombarrasso.com/final/
The issue with IE's built in debugger is that my webpage crashes IE if you open three scrollers and click the right arrow. In Safari and Firefox all is well, not terribly fast but not terribly slow. But IE completely freezes and crashes, which ruins my chance of using the built in profiler. It is getting to the point I am about to put a message for all IE users telling them to go elsewhere, but I would like to get the site to work because everything else even works in IE6 (crazy).
Try Firebug Lite
And on a side note I would recommend changing your color scheme, it isn't easy on the eyes. Here is another resource that could help you with that. Color Scheme Designer