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.
Related
I have a strange issue whit my emulate touch functionality on Google Chrome version 49.0.2623.110 m.
I'm using laptop + monitor (both Dell) and running Windows 8.
The issue is that while Chrome is on my secondary monitor and touch screen emulation is enabled I cannot see a touch screen pointer (black circle) nor any kind of pointer, but when I move my Chrome to my main laptop display it would show. I tried disabling laptop display while using external monitor and it is the same, I cannot see the pointer. This was not a problem with previous Chrome version.
Did anyone had similar issues with this version?
Thank you
EDIT:
I've change the laptop, updated to win10 and updated Chrome to 50.0.2661.87 m version and I still have the same issue (colleague of mine has the same problem as well).
A colleague of mine "solved" the problem by enabling Windows' Mouse pointer trails at minimum length. I find it too annoying to work with the setting enable, but it does work if you really need it.
Mouse settings
They did some changes in recent version of Dev Tools and some options are now gone. Ensure you have "Mobile" or "Desktop with touch" selected, as you can see on the screenshot.
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 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.
I would like an iPhone simulator for Windows. Something similar to this one here:
http://css-tricks.com/video-screencasts/38-basics-tips-on-designing-for-the-iphone/
Note, this is NOT to test iPhone Apps... but rather, to test websites. I know I could just use a browser, but I was hoping for something with a bit more functionality ( specific to the touch interface ) that I could test some web pages on.
I've seen the beta project here: http://labs.blackbaud.com/NetCommunity/article?artid=662
Is this the best option at the moment? The article was from last year, that's why I ask.
Just to add additional information to this post:
found another one for both iphone and ipad: http://code.google.com/p/ibbdemo2/downloads/detail?name=iBBDemo2.air&can=4&q=
Google Chrome now has the ability to "Toggle Device Mode" by clicking the Phone icon in Dev Tools. This gives you a more touch-specific interface than just using the browser, allows you to throttle data, etc...
From here, you can choose the device:
You can do it all online, without a simulator:
http://iphonetester.com/
Keep in mind, it's not a real test on an iPhone, but if you use it with Safari or Chrome for Windows, you'll come really close to how it'll look on an iPhone.
UPDATE: iphonetester.com no longer exists.
That's the best I found: http://iphone4simulator.com/
There is a commercial successor to iBBDemo2 that's available for $40 - http://www.electricplum.com/studio.aspx
What are the differences from a developer point of view between Safari for Mac and Safari for Windows?
I think it boils down to evaluate differences between (if I missed something, please correct):
- Layout rendering
- Javascript behavior
The final decision to be made being:
Can developers test only on Safari Windows (knowing that we can't afford to miss important bugs)?
Thanks,
JB
As far as rendering and JavaScript are concerned, there is no difference. What is different is underlaying UI library used for browser itself, but page render is the same.
Font rendering can be different between Mac and Windows Safari as the systems typically have different fonts. As long as your page can gracefully handle missing fonts or different font sizes it should be fine.
Style sheet rendering is significantly different between Safari and Windows. To see this, try creating a page that has an element with a z-index of -1. The windows version will function without issue, the Mac version will not allow you to select the elements. Trust me, I wasted about three hours trying to figure out by trial and error why a page would work in one system but not the other. The worst bit is that when Safari doesn't render something properly, it does so without any indication. You have to debug line for line, a dreadful experience.
I have also seen problems in Safari for Windows that don't exist in Safari for Mac on CSS heavy websites. Can't remember the specifics, but they were there.
I am currently experiencing an issue where floating images in a blog with text wrapping around the image do not properly pad themselves in OS X; works fine in windows. Basically I've added padding to make the image align flush left or right such that the edge of the image is at the same offset as the edge of the text of the post; on OS X the image sticks out past the edge of the text.
A site I am working on now has a problem in safari for mac that isn't in safari 3 or 4 for windows. I cant figure it out for the life of me.
A call to java from javascript throws:
java.net.MalformedURLException: no protocol:
at java.net.URL.(Unknown Source)
at java.net.URL.(Unknown Source)
at java.net.URL.(Unknown Source)
at sun.plugin.liveconnect.SecureInvocation.checkLiveConnectCaller(Unknown Source)
at sun.plugin.liveconnect.SecureInvocation.access$000(Unknown Source)
at sun.plugin.liveconnect.SecureInvocation$2.run(Unknown Source)
at java.security.AccessController.doPrivileged(Native Method)
at sun.plugin.liveconnect.SecureInvocation.CallMethod(Unknown Source)
on Safari windows but not safari mac.
Just wanted to add this experience I came across for Safari. Our devs are still going to look into this but not high priority for us since Windows Safari isn't much of our user base unlike Mac. But I think it relates to either (or both) - actual browser low level implementation of Safari by Apple, and/or javascript differences.
Our website recently implemented an HTML5 multiple file uploader. Single file uploads work fine on both versions of Safari. But when uploading multiple files, it fails on Windows. We had two different upload clients & endpoints for the uploader (think A/B testing flow), and one of them provided more details that may or may not point at the cause of the problem. On one of the client & endpoints, the client would send details of the filenames & filesizes of files to upload (as JSON array object) to the server endpoint (as seen via web inspector). On Mac where it worked, filesizes were valid, on Windows, they were 0 bytes.
I think the uploader is JQuery based or some other JS library. But I'm not the dev, so can't be sure. But I have a hunch this issue goes beyond JS libraries...
I had an issue with the popup blocker in Safari in Windows XP. I guess the blocker didn't accept that the user clicked a link an Flash that then triggered a JavaScript that opened the Window. The did work in the other major browsers and Safari in OS X, though. Chrome also blocked my window in XP, but not in OS X or Ubuntu.
In Mac Safari I'm able to do cross script ajax with file:/// protocol, but in Windows Mac I'm unable to do this.
I am working on a website that has pretty standard layout. I have a box that contains other divs. It works on all major browsers, from IE6+, FF3+, etc. On Safari 5 on OSX, the box is totally to the left, outside the borders of my website. On the same safari version in windows, no problem.
I am going crazy over this.