I'm trying to 'mobilize' a site I'm working on using media queries in CSS.
I have an Android phone myself so have been testing on that with good results.
I now want to test on the iPhone but don't have a device, having searched the net and downloaded a few recommended simulators it seems they don't recognise the media queries, but without a device to test on I can;t e sure if my queries don't work - or if its the emulator that doesn't recognise them.
Does anyone know of a emulator for iPhone / iPad that runs on Windows and recognises media queries?
Mike
You should try using ProtoFluid - it's a web app that allows you to emulate an array of mobile devices and tablets, fully recognising media queries.
It's free to use (for now at least).
Related
I'm currently planning on making a desktop application that requires access to a connected phones camera. For example, if I plug in a phone using a usb cable I want to be able to see what the phone's camera is seeing on the desktop application. The program must also support android phones because that is what I'm currently using.
I was planning on creating the application in swift due to me working on a mac. Unfortunately I've never worked with swift before, so I was wondering if this sort of thing is possible in the language? If not, are there any other languages that might be able to achieve this?
I'm trying to use a very simple media query, but looks like I'm missing something. My code seems to work in most clients, but when testing in litmus, from and above Android 5.1 I see that my media query is ignored.
I tried to make the most basic example, which can be found here: https://litmus.com/builder/b46c315
Any idea what I might be doing wrong, or how else to achieve to target these android devices with specific styles?
Android stopped supporting media queries after version 4.4.
If you are testing in litmus you will notice that media queries dont work in android 5.1 and 6.0
This caused all kinds of problems for me and I have now switched to a Hybrid template base for html emails that react responsively without the use of media queries.
The Android device on Android (not 4.4) is gmail app. Google has stopped shipping Android with its own email client and made Gmail App as the default app.
To test on Android you can use Outlook.com app but i has limited functionality compared to Android's original app or iOS.
Can I successfully do iPhone/iPad web development (not native apps) on Windows, and without having an iPhone/iPad device?
I.e. work like PSD-to-iPhone-optimized XHTML/CSS layout.
I’m interested to learn about and make iPhone/iPad optimized websites. Any tips? How different will it be from desktop? What’s different other than the smaller screen?
From experience I will say the only true way to test for the iPad is to test on an iPad. I have been developing a site in html5 specifically for an iPad and we initially used the iPhone to test. The drag function we had implemented with jQuery had worked almost perfectly on the iPhone but after the client had tested on the iPad they came back to us and said the function did not work period and they were correct.
I guess this could change depending on what type of development you are doing. From experience I would say either A. Make some trips to the apple store B. Make friends with iPad owner C. Buy and iPad
yes for an ipohne emulator... try MobiOne.
It's a good application to test the pages in iphone like environment.
http://www.genuitec.com/mobile/
I don’t think you can really do iPhone/iPad development successfully without an iPhone/iPad at all, whether on Windows, Mac or Commodore 64.
If you’re serious about iPhone/iPad development, how could you not try your software out yourself on the devices it’s going to run on? Your clients are going to want code that works on the iPhone/iPad. You need an iPhone/iPad to check that it works.
if your developing a web app then i think you can use this: http://ipadpeek.com/
The answer is: Yes you can absolutely do iPhone and iPad website development on a Windows PC.
However, you really should/must test the result on an actual iPhone/iPod Touch/iPad. Especially if you are integrating in any way with special device features like the dialing feature of the phone. (Yes you can have phone numbers in a webpage trigger dialing when you tap on them.)
However, you can do the bulk of the development on Windows, testing the WebApp in Safari or Chrome, which are the most fully compliant HTML5 WebKit based browsers out there.
Also highly recommend using an HTML5 touch framework like jQuery Mobile or Sencha Touch. This will go a long way to ensuring that your WebApp is optimized for the screen size and touch gestures of the mobile devices.
Remember that you can't deploy a pure WebApp to the app store, only download it from a website. You'll need a native wrapper like PhoneGap for that. And to compile a PhoneGap wrapped WebApp you'll need XCode on a Mac.
But there's a lot of power in adding your WebApp to the home screen on iOS. No native code involved and you get a full screen webapp with a home screen icon, loading image and no browser toolbars. Highly recommended.
I need to develop a website which will be used exclusively on iPhone and iPad. I don't have those devices, neither do I have a Mac.
What are the possible free solutions for me to be able to test the website during development?
The most obvious one would be to use an iPhone SDK, but since it costs $100/year but since it is available only for Mac, it is not a solution in my case.
Download Safari 5 for Windows, enable the Developer Menu features and change the User Agent to Mobile Safari iPad or Mobile Safari iPhone. This will let you see how your website looks when an iPad or iPhone renders it. Just make the window smaller to get the full experience.
If analyst predictions are right, there will soon likely be an abundance of iPhone 3G devices on eBay as lots of people are eligible to upgrade to iPhone 4 tomorrow. Picking up a cheap 3G may be the best solution to your testing requirements.
Or you can test it out at an Apple Store if your website is accessible over the internet or available on a laptop with an ad-hoc WiFi connection.
You can test your website in any browser, but yes, mobile browser probably behave different at some points.
If you cannot find a mobile web browser simulator for iPhone than the "cheapest" alternative would probably be an iPod touch.
Update:
You might want to have a look at iBBDemo:
iBBDemo2 - Cross Platform iPad and iPhone Simulator
You could try using something like:
www.testiphone.com/
Recommend you use jsconsole
Remotely debug a mobile web app
jsconsole.com is a simple JavaScript command line tool. However, it also provides the ability to bridge across to other browser windows to remotely control and debug that window - be it in another browser or another device altogether.
In fact, mobile web app debugging is so damn tricky, that I gave up, and decided to build this very tool instead. See the videos examples if you'd rather see this in action now.
Creating a session
To create a new session, in the jsconsole prompt, simply run:
:listen
This will yield a unique key along the lines of FAE031CD-74A0-46D3-AE36-757BAB262BEA. Now using this unique key, include a anywhere in the web app that you wish to debug:
<script src="http://jsconsole.com/remote.js?FAE031CD-74A0-46D3-AE36-757BAB262BEA"></script>
Now any calls to console.log from your web app will display the result in the jsconsole session that is listening to your key. Equally, if you run a command in the jsconsole session, the code will injected in to your web app and the result returned to jsconsole.
In addition to generating a new code with :listen, you can also ask jsconsole to listen to a predefined code (but for your own security, try to chose something unique that only you know):
:listen FAE031CD-74A0-46D3-AE36-757BAB262BEA
Now I can use the same remote key in my web app to avoid having to regenerate a new code each time. Note that only the last remote client (i.e. your web app) to connect to jsconsole will recieve remote debug calls - previous windows will be ignored.
To know when the web app has connected, jsconsole will notify you by showing your the userAgent string for the device:
:listen FAE031CD-74A0-46D3-AE36-757BAB262BEA
Creating connection...
Connected to "FAE031CD-74A0-46D3-AE36-757BAB262BEA"
Connection established with Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-GB; rv:1.9.2.8) Gecko/20100722 Firefox/3.6.8
A word of warning
Note that this technique is also injecting code directly in to your web app - this tool should only be used for debugging. I can't take respibility for how you use this tool, basically: take care!
Current known support
Remote debugging has been developed to work on all platforms, even if the technology isn't supported. However, jsconsole remote debugging has specifically tested and working on the follow mobile devices (feel free to add to this list):
iOS 4.2.x - iPad, iPhone 4
Andriod 2.2.2 - Nexus One
webOS - Palm Pre
There are some Video examples too
More detailed information please see this links:
http://jsconsole.com/remote-debugging.html
There are some obvious things here:
1)Work very hard to make your site work on all major browsers - including Safari and any other mobile devices other than iPad... this will let you make sure it works on smaller screens well.
2)Read up on known glitches in these browsers and see if you can avoid them.
3)Whenever you are with friends showing off their iPad, or who have an iPhone, ask to test your site on it.
I need to develop a website which will be used exclusively on iPhone and iPad
This seems a bad idea. if it's only used on iPad/iPhone, surely you should write an App and get all the benefits of UI, etc.
Websites should not be tied to specific devices.
This is not 1998 : Best viewed in I.E. In fact your suggestion is worse than that.
If you really want a website that only works on those devices then you'll need to check the user-agent string, but otherwise html is html and unlike what Apple may want you to believe, works just as well on Symbian, Blackberry, Android, S40, Windows, Windows Mobile, etc etc..
(In fact, it works better on Symbian as Symbian actually supports Flash.)
I am looking for iPhone emulation software to test a couple of internal web applications against the iPhone. There are a few quirks occuring with iPhone users that would like to fix but I am unsure how to test them.
For example one of the issues is that numbers are showing up as phone number links on the iPhone which 99% of the time is incorrect. On regular Windows Safari this doesn't occur.
There are also formatting issues with fonts and spacing that occur on no other broswer except the iPhone version of Safari.
Emulator must be free and work under Windows. Suggestions?
There is a Windows build of WebKit embedded inside an iPhone-like shape called Blackbaud iPhone Browser Simulator. You can download it here http://labs.blackbaud.com/NetCommunity/article?artid=662
If you're looking for general WebKit issues, Safari 4 and Chrome use fairly similar builds of WebKit. Most issues can be troubleshooted in that manner.
For things like the automated tel://########## hyperlinking, though, you're likely SOL. That's an iPhone specific customisation of WebKit. It can be disabled (details in someone else's answer here) but you're not going to be able to test for the behaviour on Windows.
Another iphone webkit emulator :
http://www.genuitec.com/mobile/
Build by genuitec, the creators of myEclipse. It's better than using safari desktop as it's a modified version of webkit in order to have the same behavior than safari iPhone. But in reality, it's not 100% equal !