Im using chrome developer tools to check out different device views (iPhone, iPad etc). I don't change the code, go on iPhone view etc and it all looks good. Then without changing the code, I check out the norebootview and go back to lets say iPhone or iPad view and everything looks very different. For example the margins are totally mixed up. Then when I refresh the page or go back to normal view back and forth, it looks normal again and sometimes it doesn't. I don't understand when that randomness comes from. I am using less/sass for the css.
Any suggestion would be really helpful!! Thanks!
Related
I'm not sure whats happening here. I thought this was working fine before and now when I look at it the news is displaying fine...but on iphone and maybe any mobile its only filling half the screen.
I could try to use the inspector on chrome to fix it but the site is filling the screen on desktop but still only half on the actual device. Any idea what might be the issue? I messed around with the media queries but its not helping.
The news section is working fine but the rest are only filling half the screen.
greenpointpictures.com
I'm working on a website that's optimized for mobile devices that can also be used on a desktop. In order to test the functionality of it without setting up a server, I'm using the iPhone simulator that comes with XCode. The website's purpose is to give a manager for the business a way of approving or rejecting potential offers the marketers have in mind to give to customers when they are away from their desk. When you get to the Approve/Reject page, you can click either the Approve or Reject button. Each button, once pressed will bring up a window (not a separate page) where the manager can add comments. On the iPhone simulator, whenever the window comes up, the iPhone will not let you scroll down at all on the window as, for some reason, the scroll function still seems to be connected to the main page, not the window that just came up. The problem only occurs on the iPhone part of the simulator, but not on the iPad part. I've been beaten by this problem for several days and I can't find anything on the internet that gives suggestions. Does anybody have any idea on what I should do with the coding, or if it's just what happens when you run the server locally on the simulator? Any help will be appreciated, as I've exhausted all I can think of.
Note: I'm using Ruby-on-Rails and the window that is popping up us a Bootstrap modal
Try Modal box on iPhone no scroll
The modal becomes a static height on the screen and it should allow you to scroll all the way to the bottom of that window.
Change the height setting so that it fits.
I am coding a web app for an iPhone and I'm wondering how best to use Safari to develop for the iPhone, the main problem being that I've got is that Safari apparently cannot be resized to the narrow 320 pixels of width. How can I do that?
Any other tips and tricks?
If you are looking for an environment to test, Ripple emulator seems a nice option.
I had the same problem and solved it quickly and simply by using a 320x480-sized iframe. Additionally, I added options to change the size (iPhone portrait, landscape, iPad, status bar or not, ...) and presto! an iPhone “simulator”!
Edit: that also allows the use of the Web Developer tools, they're invaluable in Safari or Chrome (I prefer to use the latter, but both are Webkit-powered).
The absolute best way is to use a real device - iPhone or iPod touch - so you get a proper feel for how the device responds. If you're doing hefty animations, for example, testing on a desktop computer may leave you scrambling once you realize the entire page lags horribly on a real device the day before launch.
Barring that, you should use the iOS Simulator that comes with the xCode iOS SDK.
You can use a browser extention or plug-in. For Safari there is ResponsiveResize for instance. You can donwload it here. It allows you to use a predefined browser size, or use any custom size you'd like.
Is it possible to live preview a photoshop document on an iPhone or iPad? I tried it with VNC, but it only transfers a limited range of colors which is suboptimal. Is this possible with Apple's Developer Tools?
Easier, free way that works both on windows and mac : https://itunes.apple.com/lv/app/ps-play-for-photoshop/id651937919?mt=8
PS Play - works with Photoshop's Remote Connections (Edit->Remote Connections). Just add your computer's IP address and the password configured in Photoshop and you're done.
I came to this page with the same question. looked at the answer --> the app --> reviews and decided I'd use what I had to get it done. The results are awesome!
Requirements:
Iphone /Ipad App: Air Display ($9.99)
Photoshop CS4+
1.) Download Air Display.
Air display is by far the best app out there for mirroring or creating an extra screen with your iOS device. I looked at all flavors of VNC/DNS. VNC is for screen sharing and the results don't exactly make you cheerful. Air Display uses your iOS device as an extra screen like your desktop setup. $9.99 is premium pricing but well worth it. There are many uses for the app after you buy it. Check out their site here:
http://avatron.com/apps/air-display
2.) Setup Air Display
These instructions are covered in the app. You'll end up with this sort of setup:
Take into account your hot corners.
3.) Create a mirrored window for your document
Create a new window for your document.
Menu Bar --> Window --> Arrange --> New Window For [Your Document]
4.) Setup your window
A new document tab will pop up with the same name as the original. Drag this tab to your extra screen and there you go. Mirrored photoshop on your iOS device!
Now this new window will mirror the document on your main screen. The great part is this new photoshop window can be set up with its own View attributes (guides, rulers, etc). Here's some more tips:
You'll know your working with the right window when your in Photoshop and the main windows actions are greyed out. Now the menu bar will affect the mirrored window
Use These Settings:
Full screen
Fit on screen
Actual Pixels
Turn Off Guides (CMD ;)
Turn Off Rulers (CMD R)
There you go. An awesome mock up interface for Photoshop --> iPad
For anyone coming across this question now, check out Skala Preview (link below). If you have CS5 or higher, it even allows for live previews. Only problem for me is it requires iOS 5 and OSX 10.7, and I'm quite happy on 10.6.
http://itunes.apple.com/us/app/skala-preview/id498875079?mt=12
The only way that this would work built in (that I am aware of) is if a UIWebView managed to open it. Otherwise I think you're out of luck.
You could try manipulating a photo that is synced to the device then syncing the device with iTunes.
I'm more inclined to think that you would be better off writing an app specific to this task and just have it open the file over wifi or something like that.
I came up with using a Photoshop action which saves a PNG to a web server. Atomic Web Browser supports a full screen mode which then shows this PNG embedded in a HTML file which reloads once per second. It works good enough.
You've tried the rest, now try the best!
Xscope is an app for mac & iphone. Install it, and not only will it give you a bunch of useful tools, but one of those tools is called 'mirror'.
You simply:
Jump into Photoshop and go to Edit / Remote Connections... to set a password
Open Xscope on mac and put that same password in your preferences
Then in Xscope, click the 'Mirror' button, then the 'Photoshop' button (see http://d.pr/i/ziaC)
Open the Xscope Mirror iPhone app and press the button to connect to your mac
And that's it. You should then be able to see your canvas. The app also lets you scale the image larger or smaller based on ratios, and even take snapshots for later reference.
It's a pretty cool app. Promise to God I don't work for them!
http://xscopeapp.com/
I have an iPhone app that I want to change into an iPad app. I do not want to make it universal. The result should be an iPad only app. The main problem I see is converting all of my .xib files. I realize that I will have to change some things around manually, but I would like as much as possible (including all of the painstakingly made connections in IB) to carry over. Also, if there are unlikely places where I need to change settings, please give me a hint to that as well. Thanks!
Xcode has a convert option. It gives you the choice between a new app or a universal one.
This will convert all your NIBs, but quite how useful that is will depend on how thorough you've been with the sizing options in Interface Builder. For me is mostly worked. A couple of minor tweaks for a couple of views and a complete rewrite for some others.
Of course you'll also have to work with view controllers that "manually" build the view.
The gotchas I found were around orientations (iPad apps should work in all four orientations) and with the screen size. There are also some oddities with the keyboard and modal views if you have any of those (there are a few kinds of modal view, and the keyboard does not always dismiss). As ever when you're making automated changes, testing is key.
The full process took me a lot longer than I was expecting.
Few thoughts for changing iPhone app to iPad app.
Xcode has the provision to change the current iPhone app to iPad app by using "Upgrade current target for iPad" menu command.
http://www.enscand.com/roller/enscand/entry/ready_for_ipad
resize all current view to the ipad size 768*1024(portrait) and then resize all the subviews respectively. the connections doesn't get lost by doing this.