I'm looking to target a website specifically for an iPad but we don't have any Macs in house for testing. What's the most accurate way to test the site on a PC? I image I could use the Safari browser and shrink the window down to approximate the iPad screen size but I wonder if there's a better method out there.
If you target a website specifically for a particular device, buy that particular device. This doesn't only apply to iPad.
Two caveats I noticed a lot of websites have for a touch-oriented device like an iPad, iPhone:
The mouse-hover event isn't generated. So, the HTML/CSS/Javascript menu structure which works without clicking on a WebKit browser (like Safari) on a mouse-oriented device might stop working completely.
The scrolling event (coming from a flick of a finger) is not passed to elements inside a page; instead it just scrolls the entire page. A subelement shown with a scroll bar on a non-touch-oriented device might be shown without the scroll bar at all. So, sometimes you lose the ability to scroll inside a subelement.
There might be other caveats. It's really difficult to imagine all the way a device might behave differently from a mouse-oriented device; so, buy an iPad.
By the way, it's of no use to buy a Mac in this situation: Safari on a Mac still behaves (as far as the mouse/touch events are concerned) rather differently from Safari on an iPad/iPhone. An iPad can be paired with a Windows PC.
See this Apple document for a few advices for preparing a web page for the iPad.
I'd just use Safari, as the mobile version uses the same rendering engine (though possibly modified to fit the iPads resources).
It should display the same, if not close.
You can try to use online imitation services.
For example http://app.crossbrowsertesting.com/, or https://saucelabs.com/. They provide lots of imitations environments, for different devices and OS. You can test the site, that is already in the web, or your local files.
I myself am working currently with app.crossbrowsertesting.com for the first time. It really shows the problem, that the client encountered on his iPad. Also have good notices about these services from experienced developer, a friend of mine.
Related
I see many samples and videos on how to do firebase for mobile and they call this "multiplatform". However, I don't see much on the desktop. There is one video on firebase flutter Windows by using a web and it seems to work. However, I do not see any tutorials for both mobile and desktop. Firebase would be a great example on syncing between desktop and mobile. We have such an app in development right now. Desktop development is new, but I'm surprised how little there is.
There is a library called firebase_dart, but the documentation seems weak.
The package firedart with the video listed above works in both desktop (linux and android without much modification..
What needed to be modified?
I had difficulty with the button on the very top of the phone, so I
added a sized box.
I had difficulty with debugPrint or print so I
added a Text widget with the results (to string).
That also worked.
Although I would like to not use fluent_ui, it does work for both desktop and mobile. I'm not sure what to do with realtime db, but I think I can make the firedart work for user sync between mobile and desktop.
It would be better if I could get firebase_dart to work.
https://www.youtube.com/watch?v=Tw7L2NkhwPc
I have been testing the Apple CoreMediaIO sample camera on Mac OS X 10.9 Mavericks.
Locally the applications i have tried could detect and recognize the sample camera automatically (like Skype, AVRecorder - Apple's AVFoundation capture API sample)
In Mozilla Firefox and Opera browsers the camera has been detected automatically on the Flash Player based sites that i have checked (for example Adobe's Cirrus sample), although in Safari and Chrome the sample camera was missing from the video input devices list.
How could i make these browsers recognize the CoreMediaIO sample camera on such a website?
Safari:
The problem causing this to happen is that on Mavericks the current Safari uses a sandboxed Flash Player which refuses to detect the sample camera.
You can solve this by allowing sites to run Flash Player in unsafe mode: (make sure you have allowed the website to use your cameras on the Flash Player pop-up window)
Go to Safari/Preferences.
Go to the Security page.
Click Manage Website Settings.
On the left pane select Adobe Flash Player.
Select the website you have allowed to use the camera and want to use the camera with.
Click on the combobox.
Select Run in Unsafe Mode.
On the pop-up window choose Trust.
Refresh the website.
From now on, Safari can detect the sample camera on the specific website.
I could not find a better/all-around solution yet.
Chrome:
This problem is mainly based on the Mac OS X AVFoundation API being disabled by default in the current Chrome (the CoreMediaIO sample uses it).
There are various methods to make Chrome detect the sample camera.
So far my best solution is the following:
Open a new tab in chrome.
Go to chrome://flags.
Search for "Enable use of Mac OS X AVFoundation APIs, instead of QTKit, Mac" entry.
Set the above-mentioned entry to Enabled.
Relaunch Chrome.
As far as i could get, the key AVFoundation flag's internal ID is IDS_FLAGS_DISABLE_AVFOUNDATION_NAME.
As long as you try to use AVFoundation based things in Chrome (OS X Mavericks) you will probably need this. (I don't really know why the default value is disabled, but i hope they will change it as Apple tends to deprecate QTKit.)
Other solutions that i prefer less:
Disabling Pepper Flash (PPAPI) and using NPAPI Flash Player instead.
Open a new tab in chrome.
Go to chrome://plugins.
Hit the plus (+) sign in the upper right corner next to Details.
Search for the Adobe Flash Player plugin section.
Locate the Pepper Flash version (PPAPI type).
Click Disable.
Refresh the website.
Google intends to deprecate NPAPI Flash Player soon, which leaves the Pepper Flash (PPAPI) as the only alternative, that was the reason to try and find a better solution than this. I don't recommend to rely on this solution considering the future of NPAPI Flash Player.
There is another temporary solution involving Mozilla Firefox. I don't know why exactly this works and i think this might easily change in the future, but i tried and verified that it works at the moment:
Close Chrome entirely (Chrome/Quit Google Chrome or Command+Q).
Start Firefox.
Go to the website you would like to use the camera with (any Flash Player based site works that calls for camera list).
Open Chrome.
Close Firefox.
Go to the website in Chrome.
If you close Chrome you will have to redo the process from Step #2. It seems like Firefox initializes something that makes the Chrome startup different and causes it to detect the sample camera. I don't recommend to rely on this though.
I'm developing a screenshot application working in fullscreen mode. I have a bug report about issues with MBP Retina, but I have no idea how to test and fix them. It looks like QuartzDebug can change displays to HiDPI mode, but I'm not sure that will do the trick. Can't find any "Retina Emultaion" related topics in Apple docs.
So my question is how can I test app (not just icons, but whole fullscreen application) for being compatible with retina display without buying one.
It's actually all in the Apple docs, though slightly hard to find: Testing High Resolution Content.
I'll sum it up for you: you should always test on a real device (or go to the Apple Store and put your application on to one of their demo retinas). But as an intermediate step, emulating the retina works too.
Quartz Debug's HiDPI mode works for this, and is a method Apple delineates as one to test with. You can also tint high resolution images using the command (in Terminal)
defaults write -g CGContextHighlight2xScaledImages YES
I'm looking to find out a clean method of deploying a USB key to a customer, that once inserted into the computer (both Mac and Windows), will auto load a respective "thing".
The "thing" could be either an application, a PDF, a splash page (html) in a web browser (system default browser), or potentially an AIR application. The problem with AIR is that I'd need the user to install AIR potentially. Since AIR is platform independent, that could work out pretty well I'd think.
I have established what will be my windows autorun.inf, to load up either AIR, or a portable browser with the splash page. And on the Mac, the user will get a folder (with a graphic background) and a link to launch the page (in a browser, or the portable browser all together). I'm looking for best practices for something like this ultimately.
Autorun isn't generally possible anymore because of the negative security implications.
You're better off making sure that your disk image is set to open a finder window on load, and that the background encourages people to (manually) run your content.
A similar option to an AIR app, but with even less overhead, are Flash projectors. They have fewer features, but are portable and lightweight.
Is it possible to set a min width for an OSX window to 320px?
The default min width in Safari is greater than this which makes it difficult to program with media queries and replicate on OSX. Please see my screenshot, which will make things clearer.
Incidentally if you are going to post techy answers (I assume someone will) please bear in mind I have no experience with backend code, the most I know is CSS / PHP / JS.
I don't mind getting my hands dirty, but the instructions need to be verbose :-)
Taken from This Link - worked for me in both chrome and safari on OS X
var location = 'http://www.my-app-address.com'
javascript:open(location,'iPhone:portrait','innerWidth='+(320+15)+',innerHeight='+(480+15)+',scrollbars=yes');
and for landscape:
javascript:open(location,'iPhone:landscape','innerWidth='+(480+15)+',innerHeight='+(320+15)+',scrollbars=yes');
In Safari, you can install an extension called 'Resizer' and you have the option of putting in custom sizes.
The funny thing is, once you use Resizer to change the window size, it can then be resized by hand to any size you want. It is almost like using Resizer unlocks the window.
I've created a chrome extension,OSX Resizer, that makes a 320px pop-up of the current window.
Basically the same as Rubinsh's solution, but code free.
The Resizer extension that drummin mentions does not provide this behavior for me.
This can be emulated through Chrome Dev Tools now.
Open Inspector, click the gear on the bottom right, and goto the 'Overrides' tab.
You can even spoof your user agent :)
If your goal is to see how sites will look on an iPhone, you can always download Xcode for free from the Mac App Store, which includes the iOS Simulator.
Alternatively, if you have an iPhone (I assume you do if you're developing sites for it), iOS 6 includes a remote debugging feature that lets you use the Web Inspector on your Mac to inspect and edit a site loaded on your iPhone.