Estou usando o Leaflet para exibir um mapa. Acabei de alterar meu HTML para usar o jQuery Mobile e o Leaflet.

Eu li a documentação do jQuery Mobile, que diz que tenho que adicionar o jQuery 1.11.

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

Mas eu estava usando:

<script type='text/javascript' src='js/jquery-3.1.1.min.js'></script>

Por que existe essa diferença ??

Meu problema é o seguinte:

Antes de me mudar para o jQuery Mobile, meu mapa estava sendo exibido totalmente em seu contêiner:

<div id="mapId"></div>

Quando mudei meu código HTML para usar o jQuery Mobile, o layout foi um desastre até que eu comentei isso:

<!--  <script type='text/javascript' src='js/jquery-3.1.1.min.js'></script>-->

e adicionou isto:

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

Mas agora meu mapa não está sendo totalmente exibido. Na verdade, só vejo uma parte muito pequena até redimensionar o navegador:

Após redimensionar o navegador, o mapa está sendo exibido totalmente.

Por que e como posso resolver esse problema? Por que não consigo usar a versão mais recente do jQuery?