I have made a website that's work fine on my computer (through all modern browser). Someone reported it's not worked from Safari mobile.
I have tried to see from Safari on windows that's make me look same as I want.
I have seen their screenshot and feel something wrong with my UI. Can someone have idea how I can check the look from my computer (windows).
How I can test my website for safari mobile from my computer.
You can actually download and install Safari in your computer and then check your website with all the available versions of safari for mobile. Choose Preferences->Advanced->Show developer menu in menu bar.
Finally, right click inside your website and then User Agent-> and then choose the safari version you want. Check this link for further information
Click "develop" on the top menu, then click on "user agent" and select your device... and navigate to your website.
check this out: http://webtide.wordpress.com/2009/09/14/how-to-test-websites-for-mobile-devices/
What you will need:
Safari Testing for iPhone/iPod Touch:
Open Safari and go to Preferences (Edit->Preferences).
Under the Advanced tab, ensure that “Show Develop menu in menu bar” is checked.
In the menu, click on Develop->User Agent->Mobile Safari 3.0 Browse to
your website and start testing!
Chrome Developer Tools has device emulation.
Related
Why does when i enter developers mode. A mobile simulated app appears in my screen? like this?
https://gyazo.com/662477cac11bbc8a71cd3fc9630bcf47
Help me return this to original
you can toggle between mobile view and web view by clicking this button on dev tools:
Has anyone come across the following problem? Please view image attached.
This problem only exist in chrome on windows machine and on mobile devices.
A strange black box appears behind the drop down menu
Try disabling hardware acceleration in Google Chrome. Go to Chrome Settings, search for hardware acceleration, and uncheck the box if it is checked. Chrome should prompt you to restart the application.
We were seeing this problem on Chrome version 50.0.2661.87 m.
I've got a little problem with my website and ipad/iphones. A certain tag in my css causes problems and I'm unable to check if I've solved the problem. Is there a way to look at my website as if on an ipad while not actually buying an ipad. Is there something like an ipad emulator or something?
You can use web (free) services that provide such functionality. There is a lot of them. For example: http://ipadpeek.com/ or http://mobiletest.me/.
There is also a simple solution that doesn't require any further app installation.
If you're running google Chrome you can enter the developer tools by hitting F12 on a PC and Command+option+I on a Mac.
In the developer tools you have on the top left corner of the screen a mobile device emulator, which you can choose various different models of mobile devices from. not just iPad and iPhone.
Note that you have to refresh the page each time you change a device emulator. Otherwise it won't load with all the characteristics of the current emulation.
I'm currently working on one of my first two projects and you can tell that I'm still at the beginning of my youtube-tutorials-&-SO-powered learning journey:
our neighbor's skin & beauty spa
Please don't be too harsh on my code :D I've hand-written everything from scratch in a little editor.
In short, everything seems to work A-OK on desktop computers (I tested FF and Chrome), but on the iPad and other tablets I'm experiencing nasty bugs - I'm having major trouble with two issues:
the Google Maps iframe is always visible (overlaps other
sections) on tablets even if the corresponding section isn't clicked
on in the menu, and I have no idea why! It seems that the
visibility:hidden on a position-fixed element isn't interpreted
correctly?
:focus works on the image gallery 'sneak peak', but
in the services section, the 4 sub-content areas are inaccessible.
(Unrelated?) When the page loads on my iPad (mini) the #logo_box
div appears at page load, but turns semi-transparent the very
instant as the map iframe appears.
EFFORT1: I removed the Google maps iframe-containing 'content' container altogether, and suddenly the :hover on the other content sections stopped working as well. This might be an indicator that something is 'linked' in a way that's not right...
EFFORT2: I assumed that the < label> is the culprit, but I can't pinpoint it. I tried this suggested solution, but it's for IOS4 (2011), and as Rob Fletcher commented last Feb., it doesn't work on IOS7.
EFFORT3: I feel that the .content div's {visibility:hidden/visible;} is causing trouble in the android mobile browser: input:checked hides instead of reveals the particular section while all others show.
Btw, how do I friggin' trouble-shoot tablets? I don't have any dev tool on ipad & android browsers.
Help is much appreciated!!
On iPad, you can go into the Settings App, then go Safari -> Advanced -> Web Inspector.
Then plug it into your Mac via USB and open Desktop Safari on the Mac. If you haven't already enabled the Develop menu, go Safari -> Preferences -> Advanced -> Show Develop Menu.
Then when you open a web page in Safari on the iPad, you can connect to it via the Develop menu on your Mac's Safari and use the web inspector.
If you're using Chrome on Android you can use remote debugging https://developer.chrome.com/devtools/docs/remote-debugging
Weinre provides similar functionality across more platforms (including Android native browser), but is a bit more involved to set up.
anyone knows if I can switch back to mobile version after requesting the desktop version in Chrome for iPhone. Basically in Android, you can toggle between mobile and desktop version. In my iPhone 4s, when I ticked the desktop version, I couldn't go back to mobile unless I open a new browser again. Any thoughts? I maybe looking at a feature that does not exist? Thanks!
I have found that I can hit the Back arrow and that will take me back to the mobile version, otherwise right now, you can open a new tab, or look on the site for a link to the mobile version, which some sites offer. I agree, the toggle option should be a feature.