Currently, I am working on developing a basic web layout that can adapt to mobile view. I have made some progress which you can check out here. The layout successfully adjusts when the window is resized in Firefox or Chrome.
However, when I tried to access it from my Windows Phone browser, the page width did not respond correctly to fit my phone's screen width, causing the layout to remain unchanged.
I have set the layout to switch to mobile view when the window width is less than 450px.
In portrait mode, my phone's width is 400px and in landscape mode, it is 800px.
Below is the source code:
<script src='jquery.js'></script>
<script src='jquery-ui.js'></script>
<!-- Additional CSS styling goes here -->
<nav id='navigation'>
<!-- Navigation links go here -->
</nav>
<div id="konten">
<div class='isi'>
<!-- Main content placeholder -->
</div>
<div class='sidebar'>
<!-- Sidebar content placeholder -->
</div>
</div>
Do you think there might be something I overlooked?
Would using jQuery Mobile be necessary for this project? (I have not included it yet)
Note: I have not tested it on other mobile browsers such as Android or iOS.