I've checked various related questions already posted about detecting mobile devices for websites, but my method is a bit different to anything i've seen and wanted to know if anyone can see any issues with it.
What I'm doing is...
I have a httpmodule that does a server.transfer(); to a blank html page on the first request of a user visit.
On this blank html page is some javascript that detects the viewport
width/height and touch capability. The js then saves this info to a
client cookie and then redirects (via window.location) to the
originally requested page.
When the httpmodule gets hit again, it reads the viewport
and touch screen details from the client cookie. If touch is
available or the viewport width is less than say 480px then the
httpmodule will redirect (via Response.Redirect()) to the mobile
version of the website.
Is there any stumbling block I will likely encounter by doing this?
I should note that the tablet version of the site is the same as the mobile, which is why I want to redirect to this version if touch is available.
any issues with it
Is not SEO friendly for sure.
Its not working if the user did not have javascript enable
Its have flickering if the cookie is not saved, or is disabled.
With the server transfer if you make any post, and any of the cookie or javascript fail, then the will also lose the post data.
Its nice idea general, but I think that you also need to check this thinks before the first server transfer. With your method you can avoid to keep an updated database with all the browser info's, I think that sounds good, but its need to be tested if its work smoothly in real world, and also make some more tests before the first server-trasnfer .
Two issues I can see: latency and touch event availability.
Round trip times are enormously extended over mobile networks: you're looking at about 500ms over 3G for an empty page request. Therefore request - redirect - redirect is about a second of extra latency before the user sees anything. I don't think you'll see flicker - as some commenters suggest - you'll just see nothing for a second, which doesn't seem like a positive experience.
Regarding touch: not all mobile devices are touch based and some that are (Windows Mobile 7) don't have the ontouch* events. You'll need to track these separately.
Viewports are slippery things too: if you aren't forcing the viewport width though a meta tag you'll find a large number of your target devices are missed by a viewport test because they'll claim to be 1024px.
As the touch-enabled devices (iOS, Android etc) all support CSS media queries wouldn't this be a better way to go?
It might be worth taking a look at the RESS (REsponsive design with Server Side components) approach championed by people like Luke Wroblewski: http://www.lukew.com/ff/entry.asp?1392
Try to use Media Queries which is CSS based and should sort website accordingly.
You can detect screen size on the fly and change css accordingly.
http://webdesignerwall.com/tutorials/css3-media-queries
http://www.w3.org/TR/css3-mediaqueries/
Related
I am wondering if there is any way I can open Chrome console when the webpage is firstly loaded and set the viewport to a specific device (iPhone X), through a JavaScript code.
I had to do a test where I should only work on iPhone X viewport so I thought was nice if they can already see the console opened with the interested viewport active so they are going to check straight away my work instead of clicking cmd+alt+j and then set toggle device toolbar
Thanks
I don't know this to be true, but I'm guessing that might not be possible because it would infringe on the sandboxing principles that Chrome tabs are based on. You are asking for system level control of the Chrome Browser UI, and there's a lot of effort put into not letting JS code do that because of malicious intent.
You could try using Electron to build an App that does this for you, however that may still have the sandbox boundary concern.
EDIT - You may also look into the Chrome extension architecture. It allows you to implement code outside of the sandbox boundaries. I'm not entirely hopeful that this would work, but it I do know that extensions allow you to control most of interface.
Something that slightly bugs me about progressive web apps on the desktop is that they retain the browser chrome/frame when you "install" them/pin them to your desktop. I love that the menu bar, bookmarks, etc. are gone, since the point is to feel like a native app rather than something in my browser, but the frame feels like one last thing standing in the way of a truly native feel. For comparison, consider the "frameless window" concept from nw.js or Electron.
So is there any way, e.g. an option in the manifest.json file, to hide the frame as well?
My research indicates that the answer is currently "no", so I guess a followup question would be, has there been any discussion of it? Are there concerns preventing it, or has it just not come up at all? Any info would be great.
Edit: To be clearer, I don't mean simply launching in a separate window with its own icon, that's just what desktop installed PWAs are. I mean removing/hiding the title bar as well, with the app icon and name and the minimize/maximize/close buttons, plus the thin frame border that runs around the outside of the entire window. All this stuff:
What you're looking for is display in the manifest (see https://developer.mozilla.org/en-US/docs/Web/Manifest#display).
"display": "fullscreen" indicates you want to completely hide the browser chrome.
However, support of specific display modes varies between browsers and platforms.
For example Windows 10 (via Edge) only supports browser and standalone right now, with support for fullscreen and minimal-ui coming in Redstone 5.
Now there comes with a new mode: window-controls-overlay
see https://developer.mozilla.org/en-US/docs/Web/Manifest/display_override#values
See YouTube intro here: https://www.youtube.com/watch?v=tj0_4pcrj7s&t=1114s
And also: https://web.dev/window-controls-overlay
(First time doing this, so I hope I'm doing it right)
As a part of a bigger project, I'm interested in being able to show an iframe with the contents of another site as it would look if viewed on a mobile device. I understand that I might run into some issues later on with mobile-specific looks and such but with my current tests I'm using a simple site with no special mobile design.
So I started out with visiting the site on my mobile phone (Galaxy S3). Here's a picture I took as reference of what it looks like on it: http://i.imgur.com/n9rRKIx.png
The important thing to notice is where the text wraps. The first row is "Turtles are reptiles of the order Chelonii[2]"
Now, if I were to visit it on my computer, the first row would be longer: "Turtles are reptiles of the order Chelonii[2] or Testudines characterised by a special bony or "
If I were to just resize the iframe, it wont automatically resize the paragraphs and such, making them wrap earlier.
I decided to google it and see if I could find a site doing the same thing. However, each one I tried displayed it wrong. All of them have the longer version as the first row. Here's some of the ones I tried:
iPhone tester
Mobile Phone Emulator
Responsivepx
Screenfly
Here's an album showing the results: http://imgur.com/a/cRaAs
As you can see, most of them look almost the same, but none of them looks or wraps like my mobile phone. This is despite me telling these sites to use a Galaxy S3 preset if available.
To clarify, I am not interested in finding another site that does this (except as a proof of concept). I want to know how to detect things like where the text wraps and the font size so that I can replicate it in an iframe.
If I've left out any vital information, tell me and I'll add it.
Preface
First of all, I am very well aware that webapps should not fiddle with window size or position. Been through a lot of similar SO questions and forum posts.
But this is a special case, where the browser is just a platform to run an app on several specific machines in a controlled environment.
Task
The app should manage windows across several displays. (up to 5)
What I've tried until now
Searched for methods for gaining information about the host system display information, but the window.screen object only reports properties of the display the window is currently on (or considered to be on, if it is halfway on one)
Tried window.moveTo and window.open with flags "left=123,top=123" but they are always limited to the current display
Tried window.resize and window.open with flags "height=123,width=123" but just as with the moveTo they are limited to the current display.
Question
What could I do to make my application use (without manual window positioning) all the available space in a multi display environment?
Scenario
Think of it like I have two projectors correctly aligned, and would like to make it possible for:
each project to project different things (each projector projecting its own browser window)
project an app seamlessly across both projectors (possibly fullscreen)
There could/should be a window running the master window layout logic
Note
I can use any flags, app or kiosk mode, as again: we deploy the app to the target environment.
The browser options are Chrome(preferred), Chromium, and Firefox on a Windows platform (because of the special video card we will be using for 5 displays).
Fallback solution
Manually stretch a window across available displays and run the apps in iframes within this master window.
Drawback: A single process is running everything, so should an app break within a frame it breaks everything.
Afterword
Also a solution to this question would be a great help as well: Windows / Chrome / ATI / Browser fullscreen across multiple monitors
Go with a chrome/firefox extension that has access to window/tabs specific APIs.
Either embed your whole application in the extension or communicate with the extension through messages (chrome, there's an equivalent on firefox).
Support in Chrome is experimental.
You can use window.moveTo(-1000,100) to move a pop up to a second monitor in IE if you check the permission "allow script-initiated windows without size or position constraints" under Internet Options/Security/custom level.
If you only have a single monitor connected, it will move the window to the edge of the primary display. I have not found a way to do it in Chrome though, it doesn't appear to have the same security option.
Try using the chrome.windows API to interact with browser windows. You can use this API to create, modify, and rearrange windows in the browser.
https://developer.chrome.com/extensions/windows
It even works with nightwatch.
Another possible solution is to use the win32 to size & position the window.
As seen in the solution of question: Chrome Packaged App and Dual Monitors (no code there, this is just for reference)
I don't think it's possible.
Browser really limit JavaScript in its permissions for security reasons.
Maybe you can manually(in JavaScript of course) set the x and y position far outside of the screen so it appears on another screen but that's not a neat way to do it.
As far as I can think of, you have two options:
Create different pages for every screen and open them separately every time.
Create all the windows with a button and make the user drag them to the corresponding screen. When the user clicks the button open the window in full screen/kiosk mode and load the content. However I don't know what will happen if you activate another screen while your in fullscreenmode somewhere. It might invalidate and close the fullscreenmode.
This is the only way you can have distinct windows in your browsers as far as I know.
I recently bought an iPod so that I could test my own HTML5 games on iOS, and while looking around I found this HTML5 app:
http://www.apple.com/webapps/games/goldnuggets.html
If you load that page from an iPod or iPhone, you'll be able to play the game.
What I found memorable about this app is that when you try to load it, it forces you to 'install' (save) it to your homepage before you can play. The benefit of this is that the HTML5 app gets the full screen area to work with when launched from the homepage, just like a normal iOS app (as opposed to being covered up with the address bar and that command bar at the bottom).
I was wondering how I can check if the app has been added to the homepage (not the actual "add to homepage" function - which according to this thread is not possible Javascript for "Add to Home Screen" on iPhone?).
I could certainly use an extra 100px, and it would allow me to easily create an iOS version and HTML5 version with matching interfaces, and a better user experience.
Any ideas? Google search turned up nothing for me.
TL;DR window.navigator.standalone
And everything you need at http://www.bennadel.com/blog/1950-Detecting-iPhone-s-App-Mode-Full-Screen-Mode-For-Web-Applications.htm
Good luck!
One thought is to add a bookmark/favorite via JavaScript (called from an onclick event):
window.external.AddFavorite( url + "?somevariablethatsaysitisok=true", "MyGameName");
which I assume would work for iOS Safari as well.
On the URL part of it you can pass an argument that, when set, would allow the game to be played. If not set then only show the book mark link
You can either browser detect serverside or, if I remember correctly use javascript's navigator.userAgent or navigator.appVersion to see if it contains iPhone / iOS. Of course I would do some testing to to make sure you get the exact string, but that's the general idea.