I am working on writing my first serious website as a personal project and would like to test it for mobile friendliness and compatibility before I go through the process of actually configuring the FTP, etc. Is there a way to do this using just the files locally on my computer? I've tried to research a way to just upload all the site files and view how everything would look on a mobile browser, but I have not been able to find anything. Or, is there a way to open the HTML files on my phone in a browser, i.e. Chrome?
the best way -> https://www.google.com/webmasters/tools/mobile-friendly/
Google Offers Tips to optimize your site template and a higher quality of mind
You can test your website using google webmaster tool here.
If you wanted to test it locally then you can try different extension for different browsers.
for chrome check this extension it will help you a lot.
In addition to others - http://www.mobilephoneemulator.com/.
And of course, you can test your website with your smartphone.
Related
How can I see the HTML code live preview on the side tab in the VSCode editor?
end result I want:
CSS, js, PHP, etc should also work in the preview.
The Vscode team has developed a Live Server extension with a lot of coordination with vscode. See v1.58 pre-release notes:
Live Preview
We have developed a Live Preview extension, which hosts a local server for web development previewing! 🎉
It features an in-editor browser preview, live preview refreshing (on file change or on save), multi-root support, and more!
The extension also has a Live Preview task, which runs a persistent server and allows you to view server traffic and its associated files.
To learn more about what it can do, view it in the marketplace or check out its repo.
There are tons of different vscode extensions for browser previews.
The one i'm using is Browser Preview.
To view .php files, you need a server, like Apache.
XAMPP is an all in one solution which offers MySQL, Apache and some other tools: https://www.apachefriends.org/index.html
ty4z's HTML Preview Extension is pretty good:
 JS and CSS definitely work in its preview window, but I haven't tested PHP yet.  My guess is it also probably works since the other two do.
I use Brackets editor to develop, I can check website on Chrome in desktop with :
http://127.0.0.1:49371/index.html
But it won't load on my iPhone (same wifi)
(I know I can play with the window on chrome, I need actual mobile device)
Couldn't find a way to do this.
ngrok is good for this, it allows you to publicly share local urls https://ngrok.com/
This is really hard to do. One solution that is easy, however, is to code on codepen.io and view your projects in debug view on mobile.
So I recently updated my online portfolio, just a few minor changes to the design, it looked great in browsersync, then when I upload it, it looks horrible. It's like some of the CSS isn't being read. I can't figure it out. When I view it in an incognito browser, it looks just how it is supposed to - knowing that, I cleared all my cookies and data and still nothing changed. I'm new to web development, and this really boggles my mind. Does anyone know what is causing this?
Web browsers tend to locally save a version of the css so they don't have to request it from the server each time you visit the page which speeds up the load time. Try hard clearing the cache for your portfolio page then try again.
modern development tools like Chrome's web inspector can turn off caching and request the entire page from the server each time, that might help you.
Could possibly be that your browser is imposing it's default-styles onto your project, or more than likely that an addon/extension is changing your browsers' ability to display your CSS. I would suggest running through your extensions and see what could be causing it, or to quickly troubleshoot, download and install another browser and leave that clean (as in no additions) and use that to test.
I am coaching my son's flag football team this winter and I'd like to make a little one pager app with jquery which will display and animate for the team some plays during huddles. I have been researching this quite a bit and it seems there is no way for safari to load local files. Some have suggested using goodreader, the app, but according to their manual they use a simplified browser rather than safari.
Not sure what else to try. The iPad is wifi only using ios5.
Safari is not capable of loading local files.
You have a few different options. You can:
Upload the file to Dropbox, and use it's offline mode to view it.
Use a native / hybrid container (like Appcelerator, PhoneGap, etc)
to bundle your HTML/Javascript into a "native" app.
No Safari can not load local files. You can't run local applications from there. What you can do is develop an actual app for your iphone using dreamweaver/jQuery. You could make pre-recorded videos and play them on your iPad as well. Goodreader, from what I can tell, is for reading local PDFs, which has nothing to do with apps... (but I don't really know)
This page should give you a general idea of using JQuery (mobile) to develop and actual app:
http://jquerymobile.com/
Edit: I just thought of a simpler approach that should work. Open a drop-box account at dropbox.com and put the website/Jquery in the public folder. Get the URL for the public folder and use that. Open the website on your iPad and then don't close the window. Even when the network connections stops it should still work.
I ended up using HTML5 built in APPCACHE: http://www.html5rocks.com/en/tutorials/appcache/beginner/
We went undefeated BTW :)
As I have recently found out a web page can appear differently in Windows and in MacOS even if one uses the same browser on both OS. Is there a plugin or an application that can imitate MacOS on the PC?
You may use an online tool for cross browser testing.
They're numerous.
For example :
http://crossbrowsertesting.com/ (you have to pay)
http://spoon.net/browsers/ (not working now for Safari)
https://browserlab.adobe.com/ (registration required)
disclaimer : I don't use those sites any more, I'm not sure they're good enough
I use Adobe Browserlab and BrowserShots. Both of these services will take screenshots of any public facing URL that you enter.
Try https://browserlab.adobe.com/en-us/index.html#
A free cross-browser testing tool
If that isn't what you need, you can try some of the paid services
http://www.smashingmagazine.com/2011/08/07/a-dozen-cross-browser-testing-tools/