Take care of mobile browser viewport

w3c / Mobile-Checker

The Mobile Checker is a tool for Web developers who want to make their Web page or Web app work better on mobile devices.

https://validator.w3.org/mobile-alpha/

MIT License

322 stars 84 forks source link

Take care of mobile browser viewport #31

Closed gbaudusseau closed 10 years ago

gbaudusseau commented 10 years ago

good article (in French) here: http://www.alsacreations.com/article/lire/1490-comprendre-le-viewport-dans-le-web-mobile.html

We don't have to set up just smartphone profile but also mobile browser profiles.

gbaudusseau commented 10 years ago

for example safari have the default width : 980 pixels

dontcallmedom commented 10 years ago

FWIW, in my code, I've adopted as default width 3 times the device-width (which for safari/ios gives 980)

gbaudusseau commented 10 years ago

as default device-width for iOS isn't 320px ?

For me, we have 3 differents width:

browser : 980px for safari
device-width : 320px for an iphone 4 & 5 (which I put in different profiles of smartphones in /lib/profiles)
and real material-width of smartphone: 640 for iphone 4 & 5 (but not important for us now)

I think we have to set viewport page as mobile browser's viewport and if we found a meta-viewport we have to adjust it. e.g : if a website don't have any viewport it can be display without double scrolling (of course if width of document not larger than 980) but users have to zoom to read correctly. I don't see in your code where you are using 980px.

dontcallmedom commented 10 years ago

in renderingData = {zoom: null, width: system.args[1]*3, height: system.args[2]*3}; in lib/phantom-script.js (it ends up being 960 for a 320 default with, instead of 980 — I incorrectly remembered this as the default in Safari)

gbaudusseau commented 10 years ago

so I will change it for 960. I will add more profiles browsers like:

Android 1, 2 et 3 : 800px Android 4 : 980px Opera mini : 850px Opera mobile : 980px Internet Explorer mobile : 1024px

gbaudusseau commented 10 years ago

about @viewport in CSS http://media-queries.aliasdmc.fr/meta_viewport_et_viewport_css_mobile.php

dontcallmedom commented 10 years ago

So, it looks like there are a number of issues at stake here:

sending screenshots as data: URL images truncates the screenshots once they're beyond a certain size; so we probably need to revert that change
it looks like page.viewportSize is not (always?) correctly interpreted when it is set after the page is opened, which we need to do given that we need the data from <meta viewport>
as discussed by email, phantomjs doesn't let us set the "device-width" used by e.g. CSS Media Queries parameters such as max-device-width and min-device-width (they're hard coded to 1024x768)

The two last points seem to point towards trying different headless browsers to see if we can overcome these phantomjs limitations with them, or if we need to start patching phantomjs to make it do what we need.

gbaudusseau commented 10 years ago

I saw the problem for sending screenshot as data. I tried fixed it but I failed. so ok for the moment I will revert this change.

I will going try other headless browser: at http://slimerjs.org/features.html I read: "The web page rendering in SlimerJS is strictly identical to the rendering in Firefox". it could be a good thing in media queries interpretation. but I also read "Contrary to PhantomJS, SlimerJS is not headless: you see windows and it needs a graphical environment. You can use a tool like xvfb on a Linux/MacOS system to have this headless feature and to execute SlimerJS on Linux boxes that do not have xorg installed."

So in this article (http://e-method.blogspot.fr/2010/11/google-chrome-with-xvfb-headless-server.html) I read we can run chrome in headless mode like slimerjs with xvfb.

and we have mephisto but I read screenshot functionality is unstable (date of 2011 maybe they improve it) http://blog.temesis.com/post/2011/03/22/Mephisto-un-navigateur-cote-serveur

what's the best as you think to start ?

dontcallmedom commented 10 years ago

I would probably try first headless Chromium on XVFB, since:

Chromium (for better or for worse) more likely to match how Web sites are interpreted on a majority of mobile browsers (since it is based on Blink, a derivative of Webkit)
chrome://flags makes it easy to make Chromium takes into account the <meta viewport> (flag enable-viewport-meta)
I think setting the XVFB display to match to dimensions of device-width x device-height will probably make chromium behave the right way for max-device-width / max-device-height in CSS media queries (but that's to check)

(note that running a full browser in XVFB is likely to be much more resources intensive than just running phantomjs; so that will be something to watch, and maybe to stress-test sooner rather than later)

gbaudusseau commented 10 years ago

ok i'm on it! :)

dontcallmedom commented 10 years ago

I suggest doing that work in a separate branch from master for now — we can keep the phantomjs solution in master for now, since it kind-of-works.

gbaudusseau commented 10 years ago

https://www.npmjs.org/package/run-headless-chromium

gbaudusseau commented 10 years ago

https://code.google.com/p/mobile-on-desktop/

gbaudusseau commented 10 years ago

https://github.com/guibbs/chrome-headless